What happens is that if one of the first two images on a row is taller than the image to the right, then that prevents the image on the next row from sliding over all the way to the left.
For example, when I expand my browser so that I get four tiles in a row, and I inspect the height of the eighth tile and the height of the seventh tile, I see that the eighth tile is slightly shorter (210.750px) than the height of the seventh tile (211.141px). This means that the ninth tile isn’t going to be able to slide all the way across because it’s getting stuck on the bottom edge of the seventh tile. The theme developer (or are you using a plugin to create the masonry effect?) probably should have used some sort of floor or rounding function to eliminate the small rounding errors that prevent the heights from being the same.
You can fix it by adding some CSS to your theme’s custom CSS option (if it has one), or by using a custom CSS plugin:
.home #wrapper article:nth-child(4n+1) {
clear: both;
}
@media screen and (max-width: 1279px) and (min-width: 768px) {
.home #wrapper article:nth-child(4n+1) {
clear: none;
}
.home #wrapper article:nth-child(3n+1) {
clear: both;
}
}
@media screen and (max-width: 767px) {
.home #wrapper article:nth-child(3n+1) {
clear: none;
}
.home #wrapper .entry-image:nth-child(2n+1) {
clear: both;
}
}
The first rule is for when the width of the screen shows 4 tiles across, the first media query is for when the screen width shows 3 tiles across, and the last media query is for when the screen width is 2 tiles across.
I added this code to my CSS sheet. It worked immediately.
This worked amazingly and looks great.
Thank you so much!
