[Support request] GP Sections Used on Home Page Not Responsive on Smartphones

Home Forums Support GP Sections Used on Home Page Not Responsive on Smartphones

This topic contains 12 replies, has 4 voices, and was last updated by  Leo 5 months, 4 weeks ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #470043

    mmarvel

    Hi

    So i was testing to see how my home page looked on my iphone. Seems the first Section on my page does not resize (shrink responsively) when viewed on my iphone. The sections work fine. This one has the following in the section.

    Box Type: full width
    Inner Box: contained
    Top pad: 40px
    Botton pad: 80px
    Background image: (yes there is one, 1100x300px to fit the full width)
    Parallax: enable
    Background overlay: none

    So I’m thinking I need some CSS to deal with shrinking the image when viewed on a smaller device but not sure if it goes in a functions.php file or in the style sheet. Plus I don’t know what I need since it is only this one image that seems to be the issue.

    Thanks for your help.
    B/r Martha

    GeneratePress 2.0.1
    GP Premium 1.5.6
    #470261

    Leo Customer Support

    Hi there,

    Try this CSS:

    @media (max-width: 768px) {
        #generate-section-1.generate-sections-container {
            background-position: center center !important
        }
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #470545

    mmarvel

    Hi.

    That didn’t quite work. The image didn’t shrink although the 2 column wording in the text now shows; the 1st column is above the 2nd. I’m actually just trying to shrink the whole section as is.

    #470720

    Leo Customer Support

    I’m not sure what you mean?

    Background images aren’t responsive by nature.

    You can switch it out specifically for mobile if you’d like:

    @media (max-width: 768px) {
        #generate-section-1.generate-sections-container {
            background-image: url(https://URL-MOBILE-IMAGE);
        }
    }

    As for columns, you will need to use lgc-mobile-grid-50 for them to stay at 2 columns.

    #470853

    mmarvel

    Actually only half of the background image shows from section 1 when viewing on a smartphone. Thats my issue. Also the 2 columns are 1 column shown in the viewing width at a time so effectively they are 2 columns, one first and then the next. That whole section looks odd on small device because it does not properly re-sized to the correct width.

    So i have 2 issues.

    1. only half of the full width image is viewable
    2. each column shows individually. the 1st column and then the second below it.

    And i do use the col 50 syntax like so.
    [lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”false”][/lgc_column]
    [lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”true”][/lgc_column]

    #470935

    mmarvel

    Hi again.

    So I started testing on a second page so as not to affect my home page. Was looking at CSS examples like this

    #example1 {
    background: url(mountain.jpg);
    background-repeat: no-repeat;
    background-size: auto|max-width|contain|inherit|initial|percentage|lenth;
    }

    in my case tried
    @media (max-width: 768px) {
    #generate-section-1.generate-sections-container {
    background-image: contain;
    }
    }
    Didn’t really solve my issue and just led to more confusion on my part.

    I’m not sure I understand how the section background determines the height and width. I’ve tried several images 1100×300, 1100×347 but when I look at it the page is much wider and taller then the images. I still can’t get them to look right on smaller devices either. So I don’t understand how the height and width get set or where that is determined.

    #470952

    Leo Customer Support

    As I mentioned background images are not responsive by nature and GP doesn’t use anything special to determine the size of the background image.

    The height is generally determined by the content plus padding.

    Have you tried my suggestion of replacing an image specifically for mobile?

    #472152

    Jacob

    January 14, 2018 at 9:35 am
    You write background images are “responsive by nature”.

    January 14, 2018 at 3:50 pm
    You write “background images are not responsive by nature”.

    What do you mean?

    This is a problem for me, because I can’t get responsive images, however I try…

    #472162

    Jacob

    Generate Press seams to be a very handy theme. I’m just buzzzled if the header image isn’t responsive. Something like 80 percent of visitors comes by the smart phone. “Not responsive” seames a bit odd, to me.

    #472391

    Leo Customer Support

    Oops sorry I definitely meant to say all background images are NOT responsive by nature and it’s not a theme thing 🙂

    The best way is to use media query to switch out the image when it’s in mobile. If you need the code, please open a new topic and I’ll help you out.

    #473286

    Jacob

    But then I found they are responsive! As far as I understand, it’s the setting in Background images/Header was what I was looking for. Thanks for instructions för background images, I’ll check that out later.

    #474368

    Kamela

    Hi Leo,

    Where do we put this code so that the background image for a homepage section is mobile-friendly?

    @media (max-width: 768px) {
    #generate-section-1.generate-sections-container {
    background-image: url(http://horsehotelsinternational.com/wp-content/uploads/2017/01/Buckskin-horse-stable-narrow-e1516305254214.jpg);
    }
    }

    It’s the big image at the top of https://horsehotelsinternational.com

    Thanks,
    Kammy

    #474420

    Leo Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.