custom-class to masonry gallery: masonry41
Masonry Gallery with 4 columns
#top .container .av-masonry.masonry41.av-large-gap {
width: calc(100% + 3px);
}
.masonry41.av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry {
margin: 3px !important;
}
.masonry41 .av-masonry-entry:nth-of-type(5n) {
width: 100% !important;
}
.masonry41 .av-masonry-entry:nth-of-type(5n) img {
width: 100% !important;
height: auto;
}
@media only screen and (min-width: 990px) {
.masonry41 .av-masonry-entry:nth-of-type(5n) {
width: calc(100% - 6px) !important;
}
}
@media only screen and (max-width: 989px) {
.masonry41 .av-masonry-entry:nth-of-type(5n) {
width: calc(100% - 3px) !important;
}
}
@media only screen and (max-width: 767px) {
.masonry41 .av-masonry-entry:nth-of-type(5n) {
width: 100% !important;
}
}
You have to play a bit on the settings to fit to your needs
as i can see now in a Column it does not work as above where the masonry is directly in a color-section.
then the media query on min-width 990 : it is enough to have here minus 3px !
Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text