How to change gallery grid from 3 columns to 4 columns | Melvin - Documentation | JoomShaper

Melvin

Updated Last: 04 October 2018

How to change gallery grid from 3 columns to 4 columns

The Melvin template default offers 3-column gallery grid for gallery addon (SP Page Builder). But every once in a while it’d be nice to lay them out in 4 or 6 columns, right? And the good news is…it’s pretty easy! Hopefully for you that grid was based on CSS only. Here is default CSS code:


ul.sppb-gallery li {
    padding: 0 15px;
    width: 33.33%;
    margin-bottom: 30px;
}

By default, as in the image below, the Gallery Addon is limited to 3 columns.

Now you can see how it was made. It's easy to change the number of columns in our gallery with just a few lines of CSS. On the occasion we can also reduce space between thumbs. Just override some CSS values :


ul.sppb-gallery li {
    padding: 0 3px;
    width: 24.3%;
    margin-bottom: 6px;
}

Custom CSS code can be added inside Helix3 Custom CSS field or inside custom.css file.