Spacing above and below columns on mobile?

When I add a row with 2 or 3 columns, what is the best way to add space above (top) and/or below (bottom) each column element when they appear stacked on mobile? Currently, they run into each other at top and bottom when they stack for mobile. Is there a global what to address this rather than adding margin or padding to each? Thank you! PS - I’m using X Pro if it matters.

Hey Brian,

You may try the following:

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 targeting 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:

Element CSS – https://theme.co/apex/forum/t/features-element-css/20500
CSS Media Queries – https://www.w3schools.com/css/css_rwd_mediaqueries.asp
CSS Class – https://www.w3schools.com/cssref/sel_class.asp
CSS Margins – https://www.w3schools.com/css/css_margin.asp

Hope this helps.

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