Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 22, 2014 at 8:58 pm #323276
    Pappasdg

    Hello,

    I am trying to setup a Masonry blog in a color section so it stays in the container. I want it to be more than 2 columns however every Masonry layout I choose it always goes into 2 columns. Is there anyway to change that.

    Thanks

    September 22, 2014 at 9:00 pm #323278
    Yigit

    Hey Pappasdg!

    Can you post the link to your page where you have your masonry element? Also, how many column would you like to display?

    Regards,
    Yigit

    September 22, 2014 at 9:24 pm #323298
    Pappasdg
    This reply has been marked as private.
    September 23, 2014 at 6:06 am #323504
    Ismael

    Hi!

    Thank you for the info.

    You can change the masonry column width with this on Quick CSS or custom.css:

    #top .container .av-masonry-entry {
width: 25%;
}

    If you want 3 columns, use this:

    #top .container .av-masonry-entry {
width: 33%;
}

    Cheers!
    Ismael

    September 25, 2014 at 9:06 pm #325264
    Kevin

    I used the css code to make it 4 columns and works great.

    Only thing is how can we make automatically change to like 3 or 2 or 1 column when resizing the browser.

    When I resize the browser, it keeps showing in 4 columns which is not good.

    Hope you can help.

    Thanks,
    MP

    • This reply was modified 10 years, 2 months ago by Kevin.
    September 26, 2014 at 7:44 am #325423
    Ismael

    Hey!

    Thank you for visiting the support forum.

    You can use media queries to change the size of the masonry entries on different screen sizes. Something like this:

    @media only screen and (max-width: 989px) {
#top .container .av-masonry-entry {
width: 33%;
}
}

    This will set the columns to 3 on iPad or iPhone screen size view.

    Best regards,
    Ismael

    September 26, 2014 at 3:45 pm #325641
    Kevin

    Thanks on the iPad works great with the css code you provided.

    http://kc.bydecosta.com
    What would the css code be for the iphone to show one image in one column.

    September 26, 2014 at 3:53 pm #325648
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 480px) {
#top .container .av-masonry-entry {
width: 100%;
}}

    Best regards,
    Yigit

    September 26, 2014 at 5:41 pm #325700
    Kevin

    Awesome exactly what I needed.

    Off topic but regarding the background for the homepage on http://kc.bydecosta.com

    On the browser and ipad looks great.

    On the iPhone, what can we do so that it resizes properly because it looks bad… hope you can help.

    http://kc.bydecosta.com/wp-content/uploads/IMG_3939.png

    Thank you so much for the amazing support.
    MP

    September 28, 2014 at 7:09 am #326090
    Ismael

    Hi!

    You can try this:

    @media only screen and (max-width: 480px) {
.avia-full-stretch {
background-size: 100%;
}
}

    Cheers!
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.