- This topic has 11 replies, 2 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
September 14, 2020 at 4:17 am #1442337Georgios
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
September 14, 2020 at 4:42 am #1442365DavidStaffCustomer SupportHi 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 isheight / width * 100
For your image that is 213px / 320px * 100 = 66%
September 14, 2020 at 5:29 am #1442403GeorgiosHi David,
Thank you for the prompt reply.
Can you let me know from which menu options/tabs I will perform these actions?
Thank you,
GeorgeSeptember 14, 2020 at 5:51 am #1442427DavidStaffCustomer SupportIf 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 thereSeptember 14, 2020 at 6:34 am #1442476GeorgiosI have removed the height (mobile) and added the 66% top padding. Still the same. :/
September 14, 2020 at 7:17 am #1442553DavidStaffCustomer SupportCan you change the Mobile Min height to a value of
1
September 14, 2020 at 11:58 pm #1443605GeorgiosAdded the Mobile Min height to “1”. Still the same. :/
September 15, 2020 at 2:54 am #1443759DavidStaffCustomer SupportCan you disable your cache plugin so i can see why its not working?
September 15, 2020 at 3:23 am #1443807GeorgiosHi David,
disabled the cache plugin and everything is working great.
Thank you for your valuable support.
Warm regards,
GeorgeSeptember 15, 2020 at 4:48 am #1443913DavidStaffCustomer SupportAwesome – glad to hear that 🙂
October 12, 2020 at 9:10 am #1485155GeorgiosHi 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
October 13, 2020 at 1:46 am #1486195DavidStaffCustomer SupportThe 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.
-
AuthorPosts
- You must be logged in to reply to this topic.