[Support request] Image in section not resizing on mobile

Home Forums Support Image in section not resizing on mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #918657
    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/

    #918683
    David
    Staff
    Customer Support

    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.

    #918686
    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!

    #918692
    David
    Staff
    Customer Support

    Awesome – glad to be of help.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.