[Resolved] Background Image in Sections / Mobile Responsive Issue

Home Forums Support [Resolved] Background Image in Sections / Mobile Responsive Issue

Home Forums Support Background Image in Sections / Mobile Responsive Issue

  • This topic has 11 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #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

    #1442365
    David
    Staff
    Customer Support

    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%

    #1442403
    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

    #1442427
    David
    Staff
    Customer Support

    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

    #1442476
    Georgios

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

    #1442553
    David
    Staff
    Customer Support

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

    #1443605
    Georgios

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

    #1443759
    David
    Staff
    Customer Support

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

    #1443807
    Georgios

    Hi David,

    disabled the cache plugin and everything is working great.

    Thank you for your valuable support.

    Warm regards,
    George

    #1443913
    David
    Staff
    Customer Support

    Awesome – glad to hear that 🙂

    #1485155
    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

    #1486195
    David
    Staff
    Customer Support

    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.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.