-
AuthorPosts
-
September 22, 2014 at 8:58 pm #323276
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 #323278Hey 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,
YigitSeptember 22, 2014 at 9:24 pm #323298This reply has been marked as private.September 23, 2014 at 6:06 am #323504Hi!
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!
IsmaelSeptember 25, 2014 at 9:06 pm #325264I 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, 3 months ago by Kevin.
September 26, 2014 at 7:44 am #325423Hey!
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,
IsmaelSeptember 26, 2014 at 3:45 pm #325641Thanks 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 #325648Hey!
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,
YigitSeptember 26, 2014 at 5:41 pm #325700Awesome 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.
MPSeptember 28, 2014 at 7:09 am #326090 -
AuthorPosts
- You must be logged in to reply to this topic.