Naturo Pro – image aspect ratio problems on smaller screens

[david]

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.

[Sonal S Sinha]

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

[david]

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.

[Sonal S Sinha]

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

[david]

That did it.

Thanks.

[Sonal S Sinha]

🙂

[Author]

Posts