Column margins on mobile

[ukic]

Hi,

I have a question about column margins on mobile view.

For example I have a setup which looks like this on desktop:

But when switching to mobile view there are no margin between columns. So my question is how can I add margins on mobile also?

Here´s the live url if you need to check it out: https://lainaanyt.fi/

[jade]

Hi @ukic,

Instead of adding the bottom margin to the section container of those columns, add the bottom margin to each column:

Hope this helps.

[ukic]

Hi,

That´s what I´m trying to do but I can´t see the margin option on columns… Only padding option:

[friech]

Hi @ukic,

Sorry about that, yes there is no margin settings on the columns, that was intended to avoid the user from messing the column layout.

I figured the Gap element will not work either. In that case, please add this on the Container’s Element CSS area.

$el.x-container .x-column.x-sm {
	margin-bottom: 1em;
}
$el.x-container .x-column:last-of-type {margin-bottom: 0;}

Hope it helps,
Cheers!