Responsive issues: image formatting on smartphone

Greetings!

On one of my client sites, the formatting of the RoadFighter theme is beautiful and perfect on desktop, tablet (Kindle HD Fire), and in landscape mode on a smartphone.

However, there are issues in portrait mode on a smartphone:

• the slider images display distorted. Aspect ratio is off. Image is "squeezed." (See "Slider-Issue image attached.) AND
• the feature images cut off a slice of the image at the bottom. (See 2 attached Feature Image examples.)

Thanks for your advice and help. I appreciate it.
Glory

 

Hello Glory,

Could you please provide us 'URL' of your site so that we can better assist you?

Thanks & Regards!
Priyanka
InkThemes.com

 

Hi, Priyanka...

Sorry for the delay in getting back with you. The URL with distorted (squeezed horizontally) sliders and (cropped-on-the-bottom) feature images can be found here: dubuquey.org [It's only when holding the phone in portrait mode that the slider images are distorted and the feature images are cut off at the bottom. In horizontal mode, they're perfect.]

Another client site (dubuquearboretum.net) which also uses the RoadFighter theme displays the sliders with distortion as well (but not quite as obvious ... maybe due to the choice of images). Like dubuquey.org, the feature images are also cropped/cut off on the bottom. [It's more apparent on the dubuquey.org site because the corners are rounded and text is cut off.]

• Feature images uploaded are the exact size recommended. 313x172
• Slider images uploaded are the exact size recommended: 1920x860

Thanks for checking this out. Any help and advice will be greatly appreciated.

Glory

 

Hello Glory,

Try this code in your Custom CSS field of your dashboard.

Code:

@media only screen and (max-width: 480px){
.feature-content .feature-content-inner .image-box {
    width: 100% !important;
    height: 172px;
}
.flexslider .slides img {
    height: auto !important;
    width: 500px !important;
}
}

Hope it will resolve your issue

Do let me know if you need more assistance,

Thanks & Regards!
Priyanka
InkThemes.com

 

Hi, Priya...

I appreciate the code. I've used it on one of my client sites with much success. Thank you.

The other client site has quite a bit of Custom CSS already. What I'm wondering is, will this new code ...

@media only screen and (max-width: 480px){​

.feature-content .feature-content-inner .image-box {​

width: 100% !important;​

height: 172px;​

}​

.flexslider .slides img {​

height: auto !important;​

width: 500px !important;​

}​

}​

... conflict with this Custom CSS that is already in place ...

@media only screen and (min-width:641px) and (max-width: 768px){​

.cstmlog {​

margin-top: 31px !important;​

margin-left: -70px;​

}​

}​

.featurebox .blog_item p {​

text-align: left !important;​

}​

Thank you for your advice,
Glory

 

Hello Glory,

Don't worry..

Above code will not conflict with the existing code.

Do let me know if you need more assistance,
Thanks & Regards!
Priyanka
InkThemes.com

 

The code you provided solved both issues perfectly. Thank you, Priya!