- This topic has 5 replies, 2 voices, and was last updated 7 years, 9 months ago by .
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- You must be logged in to reply to this topic.
Home › Forums › All Other Themes › Naturo Pro – image aspect ratio problems on smaller screens
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.
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
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.
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
That did it.
Thanks.
🙂
Cable Company WordPress Themes This roundup of website solutions has to do with the best cable company WordPress themes for wire production and cable making […]
WordPress Most Customizable Themes Free Several WordPress most customizable themes free have been made available that could be easily downloaded. Understanding the importance of having […]
Metro WooCommerce WordPress Themes Metro WooCommerce WordPress Themes deliver metro style uber look and feel. These metro WooCommerce WordPress themes reflect the most current design […]