Full width image with text overlay

[dannikb]

I’m trying to create a page layout with a header, followed by a full-width image with text overlayed on top of it and a bottom border, followed by a non-full-width content area, followed by a footer.

I’ve created the page using the “Blank - No Container | Header, Footer” template.

I’ve added two sections. In the first section, I set the “background lower layer” to my image with size and position both set to “top” and setup the bottom border. That all looks great!

I then added a row to Section 1. It has “Inner Container” set to “On” and “Marginless Columns” set to “Off.”

In that row, I added a “vertical gap” element which is set to 450 px. This seems to give me the height I want on the image (on desktop). Next, I added a “Headline” element to that row. However, no matter what I do, the headline doesn’t seem to show up. In the preview, I can see the element with a capital “T” placeholder, but the text I type in doesn’t appear.

So, I have two issues:

1. Why doesn’t the text appear?
2. How do I make the height of the image shorter on mobile?

Bigger picture … is this the best way to accomplish what I’m trying to do?

[ruenel]

Hello There,

Thanks for writing in!

1.) The text do not appear probably because of the height yo have set to the column.

2.) The image height depends on the height of the gap. If you can set two gaps with different sites and show/hide each of the gap element in different screen sizes. You can achieve this by utilizing the “Hide During Breakpoints” options. To know more about it, please check it here: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

And yes you are on the right path. To better assist you, please provide us the url of the page where we can find the section so that we can take a closer look.

Thank you in advance.

[dannikb]

1. I’m not sure how to set the column height. Where would I do that?

2. Makes sense … I thought that might be the answer!

The URL is http://www.dannibennett.com/test/

[christian]

Hey Dannette,

There is not height option for the column. Ruenel just thought if you have used custom code to set a specific height for your column since he have not seen your page yet.

The reason why your Text does not appear is because its font size is 1em and EM is relative (or 2 times the size) to the font size of its parent which is the content container which uses REM, another relative unit so it ultimately boils down to the Root Font Size in Pro > Theme Options > Typography. It looks like you’ve set everything to 0 so you get nothing from multiplying it.

Please check if that is the case and set them back to 14 which is the minimum recommended size. Just don’t set it to 0 as that is equivalent to hiding all the text in your site that uses EM and REM based font size units.

Thanks.

[dannikb]

Thank you! That did the trick!

[rad]

You’re most welcome!