Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 24, 2014 at 6:37 pm #295579
    Nashtad

    Hi Kriesi,

    I am having trouble changing the masonry columns in a boxed layout view.

    If I use Masonry it normally spans the full width of the browser and has multiple columns. If I use masonry within a full-width content element on page without a sidebar it comes up with only 2 large columns.I would like to be able to split this into 4 columns as per my site theme. Currently there is no option for how many columns.

    July 25, 2014 at 10:50 am #295859
    hexquare

    Hi.
    I encountered the same issue I couldn’t solve. When placing ‘masonry portfolio’ into ‘color section’ I can only have 2 large columns, but I would like to have at least 3 columns of adequate size with large white gaps (not grey! as they are currently are). I want to use masonry portfolio as navigation menu and two oversized images are pretty much behind what I would call clean and readable display.

    Thank you in advance

    July 26, 2014 at 9:52 pm #296277
    Nashtad

    So I found somewhat of a fix. It isn’t perfect, but looks good for 4 column:

    #top .container .av-masonry-entry {
    width: 24.8%;
   }
.av-masonry-image-container {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}
.av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
    padding-bottom: 80%;
    width: 100%;
    z-index: 1;
    height:420px;
}
.av-masonry-image-container {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 275px;
    text-align: center;
}

    Maybe you can suggest a better way to do this Kriesi? For instance, this doesn’t collapse into mobile very good at all!

    July 28, 2014 at 5:04 pm #296883
    Yigit

    Hey!

    Please add media queries to your code as following to apply it only on screens bigger than 990px

    @media only screen and (min-width: 990px) {
#top .container .av-masonry-entry {
    width: 24.8%;
   }
.av-masonry-image-container {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}
.av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
    padding-bottom: 80%;
    width: 100%;
    z-index: 1;
    height:420px;
}
.av-masonry-image-container {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 275px;
    text-align: center;
}}

    Cheers!
    Yigit

    July 29, 2014 at 1:05 am #297088
    hexquare

    Wow. Well now, this is simply genius. Dear Yigit, I’m in love you code :)

    July 29, 2014 at 9:20 am #297193
    Yigit

    Hey!


    @hexquare     glad it worked for you Alex! :) We will keep the thread open for OP

    Best regards,
    Yigit

    August 1, 2014 at 11:09 pm #298969
    Nashtad

    Works great! forgot that if it collapsed back to the original it would be fine!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘masonry columns in boxed view’ is closed to new replies.