[Support request] Adapt page header image in mobile

[Eloy]

Hello!

I need the page header image on mobile to adapt to the screen size 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 and this is the test website

http://whynotpilates.recetamaestra.com/

[David]

Hi there,

the image is the background to the first container block in the page.
And changing its background-size is going to cause you other problems with that design ie. the Image won’t fill the container leaving a lot of white space.

To see that trying adding this CSS:

@media(max-width: 768px) {
    .gb-container-e6fb72d9:before {
        background-size: 100% auto;
    }
}

[Eloy]

Mmm, I see… thank you for your help 🙂

Nothing to do then? There is no way to scale the image according to screen size?

Thanks again 🙂

[David]

Without distorting the image – no.
You need to consider either:

a) Changing the background image for Mobile.

OR

b) adjusting the Content inside that Container block so it keeps the Landscape aspect ratio on mobile. Such as reducing font sizes or padding.

[Eloy]

Thank you.

I´d have to change the background image of the container inside the home page in the mobile section, right?

[David]

Thats correct.

If you have GenerateBlocks Pro you can do that with the Advance Backgrounds:

https://docs.generateblocks.com/article/advanced-backgrounds/

If you don have GB Pro then it will take some CSS. Let me know

[Eloy]

Thanks.

I don´t have GB Pro.

[David]

OK:

1. Select the Container Block that has the background image.
1.1 In the sidebar Advanced > Additional CSS Class(es) field add: home-hero-image

Publish those changes.

2. Add the following CSS to your site:

@media(max-width: 768px) {
    .gb-container.home-hero-image:before {
        background-image: url('the_full_url_to_your_mobile_image/image.jpg');
    }
}

Update the background-image url to that of your mobile image.

[Eloy]

Weird,

is not working…

@media(max-width: 768px) {
.gb-container.home-hero-image:before {
background-image: url(‘http://whynotpilates.recetamaestra.com/wp-content/uploads/2021/12/imagen-cabecera-why-not-pilates-manuel-alcazar-5-5-movil.jpg’);
}
}

And -> https://imgur.com/a/orPa9Bs

[David]

Check it in the Front End of the site – that CSS won’t apply to the editor unless we add some code to apply it inside the editor.

[Eloy]

I do not understand. That CSS is in additional css section in appearance / customize

[Eloy]

Hi, again.

So is there any way to do it? I didn´t understand the last answer.

[Ying]

So is there any way to do it? I didn´t understand the last answer.

How’s the front end look like?

The CSS you added won’t show the effect in the page editor, but it should show in front end.

[Eloy]

The front end looks the same, no changes.

You can check it http://whynotpilates.recetamaestra.com/

[David]

Can you move that CSS to the very top of all your CSS in Customizer > Additional CSS.

One thing to note – i looked at the Mobile Image and apart from it being smaller it looks like the same image as the Desktop one…. which means your won’t notice any difference in its positioning….

[Author]

Posts