CSS Issue - Columns Resize Automatically When Browser Window Shrinks/Enlarges

kirkpa31

Hopefully this will be an easy question to answer - it is puzzling me tremendously:

I have designed my page with Pinterest in mind - separating the main content into columns. I have specified the columns as follows:

#Content {
width: auto;
margin: 0px auto;

-moz-column-count:auto;
-webkit-column-count:auto;
column-count:auto;

-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;

-moz-column-width: 294px;
-webkit-column-width: 294px;
column-width: 294px;
}

#Body {
width: 100%;
}

When resizing the browser, the number of columns increases and decreases to fit the screen. However, both the left and right columns are flat against the side of the screen - the gaps between the columns remains steady at 20px - but the width of each column increases to fill the remaining gaps.

Is there a way that I can get it like Pinterest - where the gaps between the columns remains fixed and the column width remains fixed - while the margin on the left and right of the content varies?

Using Vanilla V. 2.0.18.8

kirkpa31

Sort of figured it out

Isolating the individual columns within CSS via:

ul.DataList.Discussions {
width: 305px;
}

keeps the column width constant. However the margins in between are now dynamic while the margins on the outside remain constant. Attempting to fix this second part now.

vrijvlinder

pintrest uses an ajax module to keep the pics in columns. So you need to use a div to contain them and give it a class like module, and then style that to keep them all in together. It is very hard to get this sort of thing to work with a liquid theme. You would need to use percentages as values.

You can use transparent image to keep the space on the left and right . Look at the code in pintrest to see this then apply the same thing to your theme

div.padItems.Module.centeredWithinWrapper.ajax.GridItems.variableHeightLayout