Question

I’m using flexslider by woothemes, and cannot figure out why the image is continually way wider than the content when the browser is resized/site is viewed on an ipad/iphone.

I don’t see any styles on the slider, slide OR image that could be causing the image to not resize. There is no height or width attribute set on the actual image itself. Furthermore, there is only one image in the slider.

The container for the content seems to be resizing too, and the image/slide width is set to 100% but still overflowing to the right hand side, causing a horizontal scroll to appear.

site: http://whitakerbespoke.com/

EDIT: The image now resizes, but there is still a horizontal scroll bar, and a huge empty space on the right hand side. I figured the image was causing this, but it doesn’t seem that way.

Answer 1

add width: 100% to the .flexslider .slides img css declaration, so it looks like this (line 21 of flexslider.css):

.flexslider .slides img {margin: 0 auto; display: block; width: 100%;}