[Resolved] Adjust scaling on mobile for full width background image

[Ola]

Hi!

On my “About us” page, I’m struggling with getting the page hero image scaled right for mobile devices (also using GenerateBlocks). Image and text overlay looks good on desktop and tablet, but on mobile the person in the image gets cropped (and right aligned image makes the face go under the text).

Is there a good way to adjust this? Or should I add another page hero with another image and use hide-on-desktop etc?

Current link: https://www.stag1.ikigai.se/om-ikigai-ab/

Happy for any input!

Best regards,

/O

[David]

Hi there,

you’re using GenerateBlocks the majority of the settings provide Tablet and Mobile responsive options which you can adjust by select the relevant tab in the editor eg. min-height, spacing ( padding ) etc. So you should be able to resize the container to achieve a more relevant size container for Mobile.

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ola]

Thanks for your suggestions!

Unfortunately those settings affects the contents within the container, not the container background itself (as it is full width as desktop/general setting). I have not found any option to adjust the image itself just for mobile (without adding an extra container with an additional image).

Best regards,

/O

[David]

GB Pro which we aim to release later this month will have responsive background controls.
In the free version if you want to display a different background image for mobile then you could do this:

1. Select the Container Block and in settings > Advanced –> Additional CSS Class(es) – give the element a class eg. mobile-background

2. Add this CSS using your CSS class:

.gb-container.mobile-background {
    background-image: url(full_url_to_your_mobile_iamge);
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ola]

Thanks for your solution!

GB Pro sounds interesting!

I’ll wait for GB Pro and use two containers with different pictures and hide-on-mobile in the meantime. Knowing myself, I’m bound to forget anything hardcoded into the CSS.

Have a great weekend!

/O

[David]

You’re welcome – have a great weekend too!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts