Images vertically distorted on iPhone but not on desktop computer

Hi all,
Images are vertically distorted in portrait view but not landscape view on my iPhone 4s and Samsung Galaxy S5.
I guess this issue stems from an error/oversight in my media queries.

Any help appreciated.

They “distort” at narrow widths because the “viewing screen” container seems to have a fixed height but fluid width beginning at a window width of about 750px. The aspect ratio of the “vewing screen” container is not maintained.

Where are the width and height of the flexslider set? (Sometimes I can’t find stuff.)


Turn JavaScript off and the height of the image box goes away at all widths but for a white horizontal border line. Good ole JavaScript. Someone else will have to pick this up.

Thanks for taking the time, I don’t understand, but I’ll battle on :wink:

Don’t dismay. Another helper-bee will be along later this morning who likely is familiar with the slider. Since you are using a Wordpress theme, perhaps someone in the Wordpress category might be familiar with it. I’ll move this thread to the Wordpress category. That would probably be a better place to start than here. If I’m wrong, they’ll move it back

Cheers ronpat :wink:

Found the problem:

in plugins/flexslider-hg/css/flexslider.css I found: .flexslider-hg.flexslider ul.slides img {width: 100%; display: block;}
I changed the height in my media query to the following to suit mobile compatiblity:
.flexslider-hg.flexslider ul.slides img {
height: auto;
Thanks again

Excellent! Thank you for letting us know.

That code would have been my first choice to examine but, as I said, I couldn’t locate it in the stylesheets. The “viewing screen” theory was a second guess. Looks like your “guess” was spot on


(NOTE: moving this back to the CSS/HTML category for proper keeping.)

ronpat, Before you move this one back to CSS/HTML, I have an issue with the menu which may be better addressed in the wordpress forum.
When tapping the ‘hamburger’ icon the menu appears momentarily and then disappears. Could this be a javascript conflict?

I see that when I narrow the desktop browser window. It seems like the menu has a short persistence. It doesn’t wait for a closing click. I recommend starting a new topic in the Javascript category.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.