Decrease Column Margin

[tapoulton2]

Hi there,

How do I decrease the width between the column without it affecting the rest of the row? I still want it to be “without container” and for the outer margins to remain the same, etc. Like so:

Hope you can help!

Tom

[jade]

Hi Tom,

Please add a class to the Row class field then add this code in the Global CSS:

@media (min-width: 768px) {
    .adjust-margin .x-column {
        width: 49%;
        margin-right: 2%;
    }

    .adjust-margin .x-column:last-child {
        margin-right: 0;
    }
}

The code above assumes that the class you have added to the Row class is adjust-margin.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[tapoulton2]

Fantastic! That worked, thanks. How would I do the same for three columns and not just two?

[jade]

Hi Tom,

You may update the previously suggested code to:

    .adjust-margin .x-1-2 {
        width: 49%;
        margin-right: 2%;
    }

    .adjust-margin .x-1-3 {
        width: 32%;
        margin-right: 2%;
    }

    .adjust-margin .x-column:last-child {
        margin-right: 0;
    }
}

Then you just have to add the same class adjust-margin to the row of 3 columns.

Hope this helps.