[Support request] Image in section not resizing on mobile

[surfing]

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/

[David]

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.

[surfing]

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!

[David]

Awesome – glad to be of help.

[Author]

Posts