[Resolved] hero image changes width when text overlay is added

[Elisabeth]

Thanks, I’ll do that (consider how I want the homepage to work on mobile) and get back to you tomorrow. Really appreciating the help.

[David]

You’re welcome.

[Elisabeth]

Okay – just before I do anything or try anything I want to get straight the order in which I should approach this. So far I’ve created a

layout element for the whole page/site which puts the sidebars and containers etc where I want them.

I have a featured header element for the non-home pages which creates a header/banner image using the featured image for each page. I’m happy with that as it allows a specific image that is appropriate for a particular page to be the banner image for that, instead of (say) randomized rotating headers.

Then, in order to create a text overlay/CTA for a banner image on the front page only I’ve created a hero header element, with the display rule to put that on the front page/home page only.

Can you talk me through how that differs from what you’re suggesting here (in your message from a few days ago)?:
A way to keep the image height consistent would be to design the Home page header Element. We can measure that height.
Then add Header Elements for your images on the other pages, and we can apply a minimum height to them so they are all consistent.
But you may want to consider first how the home page image will work on mobile with the text overlay.

Are you suggesting changes to my hero header with the CTA and/or the featured header for non-home pages or is this starting from scratch with new elements for those two things? Either is fine, I’m just not sure I am quite following.

[Elisabeth]

Happy to be posted to a tutorial if there’s a relevant one – just not been able to quite match what I’ve found to what I need.

[David]

Should be no need to start from scratch.
Just some simple CSS force all header elements / heros to the same height:

.page-hero {
    min-height: 350px; /* set this to the height home page hero */
}

[Elisabeth]

I’ve been doing this on the live (behind construction page) site now rather than the test site and it’s looking lovely. Thank you so much!
The image which the text sits over doesn’t display fully in the mobile version but it means the text overlays a black background and that kind of works, especially as the portrait appears lower down the mobile page where I’ve got it in a sidebar image widget.
So, fingers crossed, I’m signing this problem off as completed for now – with many thanks.

[David]

Awesome. So glad to hear that 🙂

[Author]

Posts