Keep masonry layout 3 column in mobile

Hi @ethanyaremco

The reason why we usually limit the number of columns of Masonry galleries on different devices such as two on mobile devices is that it usually doesn’t look good when more columns are added because of how the Masonry gallery is developed to behave.

With that said, you can tweak the following CSS code snippet to see if it will help. This one will add a third column to massonry gallery on mobile devices. You can tweak it further for the other screens too:

@media screen and (max-width: 480px) {
    .foogallery.fg-masonry.fg-col3 .fg-item {
		width:32.66%;
    }
    .foogallery.fg-masonry.fg-col3 .fg-column-width {
        width:32.66%;
    }
}

All you’ll now need to do is simply copy the code snippet as it is and go to the Edit page of that particular gallery and if you scroll down past the Gallery Settings section, you’ll see the “Custom CSS” section. Paste the code snippet as it is on the text box below it and save. You can also paste it to your theme’s style.css file or custom CSS/additional CSS area.

Hope this heps.

Kind regards,
Elvis.