Slider image not responsive

  • Author
    Posts
  • #123486

    kader4house
    Member
    Original poster

    The slider image does not resize on mobile and is totally cut off on my site. How can i make the slider work for mobile?

    The blog I need help with is: kader4house.org

    #123602

    tarasdashkevych
    Theme Author

    Hi,

    The background image in the Featured Content section uses a “cover” functionality (CSS3), meaning the browser automatically scales the image as large as possible and maintains image aspect ratio so the image does not get squished.

    The image “covers” the entire width and height of the container. When the image and container have different dimensions, the image is clipped either at the top and bottom edges, or the left and right edges.

    You can disable it by adding this custom CSS:

    #page #featured-content .has-background-cover {
      -webkit-background-size: contain;
      -moz-background-size: contain;
      background-size: contain;
    }

    The problem is that this CSS can cause styling issues.

    Thanks,
    Taras

    #123612

    kader4house
    Member
    Original poster

    Appreciate the heads up on the associated styling issues. This text/image overlay seems to work when the image is “neutral.”

    I think what I would really prefer is to move the text entirely below the image on mobile. Any tips on that?

    #123639

    tarasdashkevych
    Theme Author

    Hi,

    It looks like you’ve managed to resolve it. The caption section is shown at the bottom of the Featured Content in mobile view.

    Please let me know if you have any further questions.

    Thank you,
    Taras

    #123648

    kader4house
    Member
    Original poster

    Well I tweaked the CSS, but my ope was that the caption overlay div would actually just move entirely off the image and below it. I had to crank the font size way down for this, and I’m not 100% on the appearance.

    #123663

    tarasdashkevych
    Theme Author

    I am afraid it’s not possible to move the caption section entirely off the image and below it because the caption section is located inside a div that has a background image.

The topic ‘Slider image not responsive’ is closed to new replies.