Gap between mobile columns

how can I put a gap between these columns?

Hi there,

Add this CSS to each column’s Element CSS:

@media (max-width: 767px) {
    $el {
        margin-bottom: 1.63em;
    }
}

Set a class to the row that contains the columns then add a CSS code targetting the columns using the class added the row like this:

@media (max-width: 767px) {
    .gap-mobile .x-column {
        margin-bottom: 1.63em;
    }
}

The code above will add a bottom margin to the columns on mobile if the class gap-mobile is added to the row’s (that contains the columns) class field.

To make the code take effect in all columns on mobile through the site, use the code:

@media (max-width: 767px) {
    .x-column {
        margin-bottom: 1.63em;
    }
}

Here are some reference links for the suggestions above:

Hope this helps.

thanks that worked

You are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.