Adapt page header image in mobile

Now is at the top of the CSS editor.

The original header image is 1600x1067 pixels and the mobile version is 768x512 pixels ->

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

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

Thank you :)

Which size do you recommend?

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.

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?

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

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');
    }
}

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

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!!!!! :) :) :)

Glad to be of help!