Archived topic
Image in section not resizing on mobile
3 replies · Started by surfing on June 3, 2019
On the site home page I'm using sections. In the first section(appears just below the primary navigation) I have a welcome message with a background image. I set this background image under settings > background image > then uploaded the image.
It looks good on desktop, however, on mobile the image doesn't resize so visitors only see a small portion of the image. Any idea how to get this image to resize on mobile?
Under layout I have the following settings:
Box Type = Full Width
Inner Box Type = Full Width
Parallax Effect = Enable
Background Color Overlay = Enable
Top Padding = 300px
Bottom Padding = 100px
Everything is else default.
I have tried using the css in this support topic but it only gets about 50% of the image resized. https://generatepress.com/forums/topic/responsive-image-in-sections/
Hi there,
have you tried changing the padding from pixels to % - this will maintain responsive padding which is what sets the height of the container. May take a little tweaking but try something like 18% top and 6% bottom.
Using % padding made a big difference. I'm also using the the following CSS in simple css:
.generate-sections-container {
background-position: center center;
}
These two items have made it work. Thanks!
Awesome - glad to be of help.
