Add a Gap in Mobile Between Columns on X/Pro Theme

jade.admin Quick Tip, Snippet, Wordpress, X Theme Leave a Comment

Issue:

Solution 1.

Add this CSS to each column’s Element CSS:

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

Solution 2.

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;
    }
}

Reference links for the solutions above:

Share this Post

Leave a Reply

Your email address will not be published. Required fields are marked *