Naturo Pro – image aspect ratio problems on smaller screens

Home Forums All Other Themes Naturo Pro – image aspect ratio problems on smaller screens

This topic contains 5 replies, has 2 voices, and was last updated by  Forum Moderator 2 years, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #70229

    david
    Member
    • Topics: 3
    • Replies: 8
    • Total: 11
    Member since: June 19, 2016

    http://livetothrive.ca/

    Hello,

    On my home page, there is an image that looks fine on a full size monitor. When scaled down to tablet or smart phone screen, it becomes squished up horizontally while vertically it stays the same height. The aspect ratio is not maintained while the responsiveness is doing it’s thing.

    The image in question is of a yoga studio, is on the home page, and is directly above:

    Thrive Studio Schedule
    View today’s classes. View tomorrow’s. Book online.

    How might I maintain the image’s aspect ratio while responsive scaling is taking place?

    Thanks.

    #70240

    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 21728
    • Total: 21728
    Member since: August 16, 2013

    Hi David,

    Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

    Add this code there:

    @media screen and (max-width:1024px) {
    .welcome-wrap img { height:auto;}
    }

    Regards,
    Chris

    #70509

    david
    Member
    • Topics: 3
    • Replies: 8
    • Total: 11
    Member since: June 19, 2016

    Hi Chris,

    That half fixed it. It maintains aspect ration at a few different responsive stages (ie. when you shrink the screen, the elements on the site reorganize themselves) but there is one where it gets all squishy still.

    Any ideas?

    Thanks for your help.

    #70542

    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 21728
    • Total: 21728
    Member since: August 16, 2013

    Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

    Add this code there:

    @media screen and (max-width:1169px) {
    .welcome-wrap img { height:auto;}
    }

    Regards,
    Chris

    #72035

    david
    Member
    • Topics: 3
    • Replies: 8
    • Total: 11
    Member since: June 19, 2016

    That did it.

    Thanks.

    #72061

    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 21728
    • Total: 21728
    Member since: August 16, 2013

    🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.