-
Posts
-
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!Hi 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,
Ismaelok. 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?
Hi!
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,
Yigit
- The topic ‘Masonry Gallery’ is closed to new replies.