Pages with grid layout/tables with images that auto resize.

[Adrian]

Hi Bill,

I’d like to implement a grid layout, something like 3 – 4 images side by side with possibly a title below for each image spanning multiple rows. I’ve tried using a table, but the images do not adjust per window size (ie. desktop ok, netbook ok in full screen mode only, smartphone not good). Note the rest of the site looks good except for the pages where I’d like to implement this feature.

The site below is using a similar feature I’m trying to describe above. However they have some display issues in IE:

http://demo.thecartpress.com/?themedemo=free-ecommerce

I appreciate your help. If you need to access the site, just let me know and I’ll send the info via email.

Thank you

[Adrian]

I saw your tweet about CrackedTruck.com using Foxy and took a look at their menu. Like them I tried something similar to their menu layout using a table and also paragraph (separately). If you resize their menu page you’ll see a break…I had this as well until I removed the image captions. So somewhere in the css there is a problem with image captions as well.

[Bill Robbins]

Adrian,

If I was going to set up a image grid like that, here’s what I would shoot to do. Instead of using a table, I would go with something like this for the HTML:

Then for the CSS,

That will create a series of image holders that have a uniform height and that you can stick an image inside of. You can adjust the height and spacing so everything fits. The height that is applied to the .image-holder is what will set everything into rows like a table. Plus since it is outside of a table, the rows can split as the content area changes size.

You’ll probably want to style that a bit more…this was just intended to be a starting place for you.

---

I’ll take a look at the Cracked Trucks menu for them. Thanks for letting me know.

If you need any other help, let me know,
Bill

[Adrian]

I did a quick test page using your code and it works great – Thank you so much Bill!

[Bill Robbins]

That’s great to hear! If you need anything else, let me know.

[Author]

Posts