CODEWITHSUNDEEP
cssgoogle-chromefirefoxsafarizurb-foundation
user273072545345
user273072545345

Reputation: 1566

How to get a row to stack neatly in a site that uses Zurb-Foundation

I have a site that is a work in progress ...

It uses Zurb's Foundation ...

There is a row with four images that are spread across evenly ... (Children, Counseling, Senior Services, & Support Groups)

When you resize the window, it stacks two by two in FF, and Safari on Mac. (haven't checked IE yet).

Anyway, the problem arises in Chrome. The four images don't stack neatly two by two as they do in other browsers.

I've gone over everything with a fine-toothed comb and still am baffled as to why it's doing this.

It also does this on my iPhone with the default browser (ie, Safari), and that also bothers me to no end because that's Safari, and yet it plays nicely on the desktop version).

Anyway, any ideas why it's not playing nicely in Chrome?

Thanks in advance for any ideas, suggestions, etc ...

Removed link as the problem is fixed.

EDIT 1

Forgot to mention that this uses Foundation's version 4.

Upvotes: 1

Views: 70

Answers (1)

Adam Huffman
Adam Huffman

Reputation: 1041

I believe you have two issues:

  1. The text above the images is not scaling properly. When I remove the <h3>'s it corrects most of the issues.
  2. The images for "Children & Family" and "Seniors Services" have the width and height attributes set with in the <img /> tag. When I remove the the width and height it fixes the rest of the issues within Google Chrome.

I hope that helps.

Upvotes: 1

Related Questions