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/

[Author]

Posts