- This topic has 11 replies, 2 voices, and was last updated 4 months, 2 weeks ago by
David.
-
AuthorPosts
-
September 14, 2020 at 4:17 am #1442337
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
September 14, 2020 at 4:42 am #1442365David
StaffCustomer 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%
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 14, 2020 at 5:29 am #1442403Georgios
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,
GeorgeSeptember 14, 2020 at 5:51 am #1442427David
StaffCustomer 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 thereDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 14, 2020 at 6:34 am #1442476Georgios
I have removed the height (mobile) and added the 66% top padding. Still the same. :/
September 14, 2020 at 7:17 am #1442553David
StaffCustomer SupportCan 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/September 14, 2020 at 11:58 pm #1443605Georgios
Added the Mobile Min height to “1”. Still the same. :/
September 15, 2020 at 2:54 am #1443759David
StaffCustomer SupportCan 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/September 15, 2020 at 3:23 am #1443807Georgios
Hi 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 #1443913David
StaffCustomer SupportAwesome – glad to hear that 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 12, 2020 at 9:10 am #1485155Georgios
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
October 13, 2020 at 1:46 am #1486195David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.