Archived topic
how to set Hero Page on mobile
5 replies · Started by gabriele on April 24, 2020
Good morning, evening or whatever,
I'm new on generate press and I'm not too expert with CSS, I' m facing a problem with my hero page. I would like to do it more responsive on mobile.
It's possible to set out a hero page version just for mobile? I could produce a specific header image in that case.
Many thanks for your help.
PS: generate press is fantastic :)
Hi there,
if you want to set a different background image for mobile then do this:
1. Edit the Header Element - in the Element Classes field add: mobile-hero
2. Add this CSS with the URL for your new background image:
@media(max-width: 768px) {
.page-hero.mobile-hero {
background-image: url(full_url_to_your_image_goes_here);
}
}Let us know if that helps
Many thanks David
You're welcome
Not sure if this requires a new post, or a continuation of this one.
I have unique Header Elements for each of my webpages as each page has a different hero-image. I'm assuming the solution David provides in post #1253075 is a site-wide blanket solution. What do I need to do so that I can target specific Header Elements for individual pages?
Thanks
Hi there,
there are a few methods for switching the background image.All of which require a little code.
If you want to start a new topic ill be happy to go through that with you.
