-
AuthorPosts
-
August 10, 2014 at 3:47 pm #302241
I am trying to control the number of images that appear in a row in the masonry gallery. Right now it’s 3. The images are all square. How can I get 5 in each row? You previously offered this CSS:
.av-masonry-entry { width: 19.9%; }That works but the images are distorted and not square.
And if I wanted four in a row, would the CSS be:
.av-masonry-entry { width: 24.9%; }Lastly, I want to make sure when the browser collapes responsively or you view this masonry gallery on a smartphone, how shoudl the images appear? stacked? right now they get really small and the rows and columns are intact.
thanks!-
This topic was modified 11 years, 3 months ago by
blankonblank.
August 11, 2014 at 2:17 am #302352Hi blankonblank!
Thank you for using Enfold.
The masonry entry column size will actually depend on the screen size. It can span up to 5 to 6 columns on larger screens but if you want to decrease the size of the columns on smaller screens, use this:
@media only screen and (max-width: 1340px) and (min-width: 989px) {.responsive .av-masonry-entry { width: 20%; } } @media only screen and (max-width: 767px) and (min-width: 480px) .responsive .av-masonry-gallery .av-masonry-entry { width: 33.3%; }Best regards,
IsmaelAugust 11, 2014 at 3:50 am #302390ok. this is great. my one question: i do like on an iphone in portrait, let’s say, that the images in masonry stack on top of each other. is there anyway to keep this feature but control on a larger screen, like a laptop?
August 11, 2014 at 3:33 pm #302649Hi!
You can add following code to Quick CSS as well to make masonry gallery on desktop look like its mobile version
.av-masonry-entry { width: 100%; }Regards,
YigitAugust 11, 2014 at 8:05 pm #302829thank you.
-
This topic was modified 11 years, 3 months ago by
-
AuthorPosts
- The topic ‘Masonry Gallery’ is closed to new replies.
