[Support request] Adapt page header image in mobile

[Eloy]

Now is at the top of the CSS editor.

The original header image is 1600×1067 pixels and the mobile version is 768×512 pixels ->

http://whynotpilates.recetamaestra.com/wp-content/uploads/2021/12/imagen-cabecera-why-not-pilates-manuel-alcazar-5-5-movil.jpg

[David]

And its working – you can see here:

https://www.screencast.com/t/zWPxuAsOOsjJ

But you need to add an image that is better designed for Mobile – eg. a Portrait image

[Eloy]

Thank you 🙂

Which size do you recommend?

[David]

You may need to experiment a little but you ideally want to crop the image so its more portrait – see the red outline for example:

https://www.screencast.com/t/MevlXkgtA

Image dimensions as an example: 768px wide x 1366px high.
That the dimensions of popular screen sizes.

[Eloy]

Thank you very much.

I’m going to do some tests and if I’m not convinced maybe I’ll buy GenerateBlocks Pro. Because there is no other option to do it, right?

[Ying]

CSS should work, but if you are not comfortable with CSS, GB pro offers built in options for this.

[Eloy]

Thanks.

And the only code I can add in CSS is this, right? ->

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

[David]

Yes – Thats the only CSS you require to change that Containers background image.

[Eloy]

I’ve been doing tests and now it looks much better. I’ll keep trying to see if I can find a better way to display.

Thank you very much for your help!!!!! 🙂 🙂 🙂

[David]

Glad to be of help!

[Author]

Posts