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

[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

[Leo]

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/

[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.

[Leo]

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.

[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]

[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.

[Leo]

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?

[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…

[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.

[Leo]

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.

[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.

[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

[Leo]

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

[Author]

Posts