- This topic has 12 replies, 4 voices, and was last updated 6 years, 3 months ago by Leo.
-
AuthorPosts
-
January 13, 2018 at 7:16 am #470043mmarvel
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: noneSo 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 MarthaJanuary 13, 2018 at 3:32 pm #470261LeoStaffCustomer SupportHi 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/
January 14, 2018 at 5:49 am #470545mmarvelHi.
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.
January 14, 2018 at 9:35 am #470720LeoStaffCustomer SupportI’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.January 14, 2018 at 12:26 pm #470853mmarvelActually 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]January 14, 2018 at 3:08 pm #470935mmarvelHi 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.
January 14, 2018 at 3:50 pm #470952LeoStaffCustomer SupportAs 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?
January 16, 2018 at 6:21 am #472152JacobJanuary 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…
January 16, 2018 at 6:41 am #472162JacobGenerate 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.
January 16, 2018 at 9:24 am #472391LeoStaffCustomer SupportOops 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.
January 17, 2018 at 7:17 am #473286JacobBut 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.
January 18, 2018 at 11:58 am #474368KamelaHi 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,
KammyJanuary 18, 2018 at 1:38 pm #474420LeoStaffCustomer SupportThat’s CSS so one of these methods here: https://docs.generatepress.com/article/adding-css/
-
AuthorPosts
- You must be logged in to reply to this topic.