Images vertically distorted on iPhone but not on desktop computer

[Argent]

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.
URL: http://www.impactwroughtiron.com.au/internal-wrought-iron-balustrades/

Any help appreciated.

[ronpat]

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.)

EDIT:

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.

[Argent]

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

[ronpat]

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

[Argent]

Cheers ronpat

[Argent]

Success!
Found the problem:

@ronpat

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

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

[ronpat]

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

Cheers!

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

[Argent]

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?

[ronpat]

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.