Page Header Image - adjust size for mobile

Background images work with the aspect ratio of the screen, which is why it's usually best to float text on top of the image, and make it so the image can be cut off without affecting the design.

You can force the image to be 100% width on mobile, but you might end up with empty space near the bottom of the screen:

@media (max-width: 768px) {
    .generate-content-header {
        background-size: 100% auto;
    }
}

I would suggest removing the text from the image, and adding it into the page header content area instead.

Is it possible to add a Mobile specific image? Faster loading and even layout opportunities (since deskotps are wide and mobile tall) or even the possibility to style it differently on a mobile site. Or even to be able to use a custom field one (thinking ACF).

thanks!

Hi there,

You can switch it out specifically for mobile with this:

@media (max-width: 768px) {
    .generate-content-header {
        background-image: url(http://URLHERE)
    }
}

For more help on this, please open a new topic.

Thanks!

I'm trying to test this out but it's not working for me.

Can you link me to the page in question?

Leo, I changed .generate-content-header to .page-hero and got it working.

Thanks!

Ahh yeah glad you've figured out :)

Hello!
I have the same problem.

I want the full image to appear on mobile but neither this

@media (max-width: 768px) {
.generate-content-header {
background-size: 100% auto;
}
}

nor this

@media (max-width: 768px) {
.page-hero {
background-size: 100% auto;
}
}

works

I´m using Access theme.

Hi there,

if you can raise a new topic and share a link to your site we can take a look at the issue and provide some advice.