jcat1

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.

@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.

@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.

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.

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.

Sorry about that. The updated link is here.