Please upgrade here. These earlier versions are no longer being updated and have security issues.

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

kirkpa31kirkpa31 ✭✭
edited August 2013 in Vanilla 2.0 - 2.8

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

Tagged:

Comments

  • kirkpa31kirkpa31 ✭✭
    edited August 2013

    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.

    hgtonight
  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited August 2013

    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

    hgtonightkirkpa31
Sign In or Register to comment.