Centering a Group within a Group

Your link to the editor view requires a Google account login. Can you post the screen shot on another online venue that does not require account access?

Sorry about that. The updated link is here.

Hey @jcat1! It looks like you should be able to do something like this by applying the same top and bottom padding to the innermost group block, and removing any height setting from the larger, outermost one. If you choose the padding to be in % units, it will also work well on multiple screen sizes. You can find out about setting padding in this article about dimensions.

Thanks @properlypurple. I tried the padding idea using percentages and it word fine for the desktop view but when it translated to the table and laptop views it didn’t work. As the screen size keeps getting smaller the text keeps moving upwards.

Hey @jcat1! Can you try using a cover block instead of the group block? It has controls for alignment of inner content ( like shown in this article ). You would also want to change the opacity of the background color to 0, so it doesn’t stand out.

Thanks @properlypurple. So I found that I had to use the group in the cover block as I wanted the header to be in front of the image as opposed to having it’s own background color. When doing it this way if I use the inner content alignment it will move the header to the center also.

The desire design is something like this https://www.ads-software.com/showcase/moooi/ where the header is in front of the image and the text is centered regardless of screen size.

@jcat1, I’m actually suggesting using a new cover block as the wrapper for your inner content, instead of the innermost group block. This way you will leave the main, outermost cover block which makes up for your banner, and you will have a smaller cover block inside, just to center-align the headline and text.

@properlypurple so I tried to cover block and it’s requirement me to put in image in the block so now I have an image within and image.

@jcat1 With a cover block, you can either specify an image, or choose a color. I’ve recorded a short video that shows you how to do this.

@properlypurple Thanks but ideally I want that new block to be clear so that the lower level cover image is seen but only the text is centered. I’ve tried to make the color block set to transparent but it still comes out as black with my setup.

I think I finally found a solution that gets me close enough. I have the main Cover block that highlights the feature image. I then have a group within the Cover block that has margins set to a value to em: Relative to the parent element and that appears to work across desktop, tablet, and mobile views.

Hey @jcat1! I’m glad you found a solution. About this:

I’ve tried to make the color block set to transparent but it still comes out as black with my setup.

If you still see this, it would be helpful to make a test page on your site and share a link, and then it’ll be easier to find out what’s happening.