Archived topic
Background Image in Sections / Mobile Responsive Issue
11 replies · Started by Georgios on September 14, 2020
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
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%
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
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
I have removed the height (mobile) and added the 66% top padding. Still the same. :/
Can you change the Mobile Min height to a value of 1
Added the Mobile Min height to "1". Still the same. :/
Can you disable your cache plugin so i can see why its not working?
Hi David,
disabled the cache plugin and everything is working great.
Thank you for your valuable support.
Warm regards,
George
Awesome - glad to hear that :)
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
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.
