masonry 4on1big – Webers Testseite

Just to have a visible container width

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

Webers Webdesign