CODEWITHSUNDEEP
htmlcssresponsive-design
mightimaus
mightimaus

Reputation: 1089

Adding image to fluid grid (responsive) layout column messes up width on mobile screens

I'm stuck with this rather odd problem that occurs whenever I place an image in one of my fluid grid layout columns. When the width of the page is anywhere above 400px, the width of the page is calculated properly. But when I shrink it down to below 400px wide, then the page stays the same width and you have to scroll left and right.

The problem even persists when I set the width image's container to, say, 50%. The image and its container shrinks, but the div that contains the image container still expands beyond the width of the screen. If I set display:none; on the image, or remove it altogether, the problem goes away and the width of the page fits the screen correctly.

Thanks!

The page: http://cdhinternational.org/index3.html I'm having trouble with the image at the bottom. (The Responsive Design Mode in Firefox is a great way to reproduce the problem. Just set it to 320x480px.)

Upvotes: 0

Views: 431

Answers (1)

Sunny
Sunny

Reputation: 2332

You need to set the width of your content-container.

#content-container { width: 100%; } should do.

P.S. any particular reason the content-container is floated left? If you remove float: left; from the content-container that should also do.

Upvotes: 1

Related Questions