Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on WordPress.org.

[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 2 days, 17 hours ago.

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

    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
    Staff

    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/

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #470545

    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
    Staff

    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.

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #470853

    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.

    #470935

    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
    Staff

    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?

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #472152

    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

    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
    Staff

    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.

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #473286

    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

    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
    Staff

    That’s CSS so one of these methods here: https://docs.generatepress.com/article/adding-css/

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.