Responsive Thumbnail Margins Problem

Hey all,

I have a responsive thumbnail grid (static, for now) on this page:

It’s based on this guy’s code:

It works fine, except that the margin between the images gets too wide on wide screens. The margins scale too and are expressed as a percentage of the overall width.

My question is, is there a way to define the margins at a fixed width and still retain the scalability? Or otherwise have more control over margin spread as the browser window gets wider?

Any thoughts on this greatly appreciated.


This isn’t a responsive layout. It is fluid (not static/fixed). The images change from a normal aspect ratio when the page is sufficiently wide enough to a narrower-than-normal (distorted) aspect ratio when the page is not wide enough… the height of the images is unchanged.

The images are in “thumbcontainers” whose margins are quite narrow. The images are simply centering themselves within those containers.

You can give the thumbcontainers a background color so the images therein don’t appear to have as much white-space between them at wide widths.

However, since this is an architectural firm’s page, I imaging that the distorted images are more important to the client than the space between them.

In my opinion, this design needs a bit of conceptual work. More planning.


Remove the width on the thumb containers and the spacing issue will disappear. Specifically this code,

.thumbItem {
float: left;
width: 32.3%;
margin-right: 1%;
margin-bottom: 1%;