Background Image in Sections / Mobile Responsive Issue

[Georgios]

Hi,

I’m trying to use a mobile-specific background image with CSS without much success.

Added below CSS code to Additional CSS but nothing seems to have changed. Any feedback on what is happening / must be updated?

@media (max-width: 480px) {
.gb-container.gb-container-099ef5fb {
background-image: url( ‘https://www.omnimetrics.io/wp-content/uploads/2020/09/seo-services-mobile-320.jpg’ );
}
}

Thank you for your support.

George

[David]

Hi there,

it is working – but it looks no different as the dimensions of the Grid Item container is the same as the desktop ie. has a Min-height of 500px.

Edit the Grid item for Mobile and remove the min height.
Then give it some Top Padding using %’s.
Set the % value to the aspect ratio of your original image which is height / width * 100

For your image that is 213px / 320px * 100 = 66%

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

[Georgios]

Hi David,

Thank you for the prompt reply.

Can you let me know from which menu options/tabs I will perform these actions?

Thank you,
George

[David]

If you select the Grid item that you have added your background.
In the Settings > Sidebar select the Mobile Tab. Then click on Spacing, you will find min-height and padding options there

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

[Georgios]

I have removed the height (mobile) and added the 66% top padding. Still the same. :/

[David]

Can you change the Mobile Min height to a value of 1

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

[Georgios]

Added the Mobile Min height to “1”. Still the same. :/

[David]

Can you disable your cache plugin so i can see why its not working?

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

[Georgios]

Hi David,

disabled the cache plugin and everything is working great.

Thank you for your valuable support.

Warm regards,
George

[David]

Awesome – glad to hear that 🙂

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

[Georgios]

Hi David,

just noticed that on tablet (and on small laptop screens) the background images in sections not scale correctly as well.

Tried the Tablet Min height to a value of 1 and added the 66% top padding options (like in mobile view) but the images still not resizing correctly. Any ideas on how to fix that?

Thank you!

George

[David]

The problem is the height is controlled by the tallest column, so as the screen width becomes narrower the text column becomes longer. The only way to resolve that would be to reduce the size of that content – eg. remove content of reduce the font size.

Alternatively you could set the Tablet Columns to 100% so they stack like on Mobile.

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

[Author]

Posts