Users running a non-download version of Vanilla (pulled from github), on branch release/2019.016 or master from the last 2 weeks should upgrade to release/2019.017 or latest master for security reasons. Downloaded official open sources releases are not affected.
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.