Adding margin to columns

[dmedianik]

So when columns are side by side they don’t need margin because of the setting marginless columns, however in mobile when the columns stack, they have no margin setting option. How can I set margins for the columns above and below to create a space so the borders don’t touch. How can I do this so it only applies when they stack on each other (Tablet and Mobile).

How do I control the stacking? What if I want the tablet to stack the 4 columns as 2 above and 2 below instead of single column stack?

You can see above why the borders touching is an issue.

[nico]

Hi @dmedianik,

Thanks for writing in.

You could use this code below to adjust the spacing for small screen size.

.e4-33 @media (max-width: 767px)
.x-column.x-sm {
   margin-top: 10px;
}

Hope it helps.

Let us know how it goes.

Thanks.

[dmedianik]

Good day Nico, would this go into that specific columns CSS? What language is this, how would I be able to learn a bit more of this so I would know some more useful tricks like this?

I’m assuming if i add:
margin-bottom: 10px; it would work as well?

[basanta]

Hi There,

Thanks for asking again!

The CSS provided by Nico have some Typo error. Here is the correct one.

 @media (max-width: 767px) {
.e4-33 .x-column.x-sm {
   margin-top: 10px;
}
}

Yes you can add margin-bottom: 10px; it will work too.

Thanks

[dmedianik]

Sorry I’m not understanding where to apply this code? Is this go on the inline CSS or the element CSS on the column?

I tried it in both places and it didn’t do anything.

[basanta]

Please add this to Dashboard -> X -> Theme Option -> Global CSS

Hope this clear Now!

Thanks

[dmedianik]

Am I able to do this targeting the specific columns within a row instead of globally?

[Alaa]

Hi @dmedianik

Yes, you can by adding this CSS snippet to the targeted column element CSS:

@media (max-width: 767px) {
	$el {
	   margin-top: 10px;
	}
} 

Please check this screenshot:

[Album] Imgur

Thanks.

[dmedianik]

@dmedianik

How do I control the stacking? What if I want the tablet to stack the 4 columns as 2 above and 2 below instead of single column stack?

Alaa thank you for the reply I love the GIF, very helpful. I’d love your input on my other question regarding controlling the stacking.

How do I control the stacking? What if I want the tablet to stack the 4 columns as 2 above and 2 below instead of single column stack?

[christian]

Hey @dmedianik,

Regretfully, you can’t control the stacking out of the box. You would need use the Hide During Breakpoints feature to selectively show elements (the sections in this case) on predefined breakpoints. With that said, you will need to setup a section with 4 columns and hide it on mobile and then setup a section with 2 rows and 2 columns for each row and then set the row’s display to flex through the Element CSS.You can achieve this setup with only a section with 4 columns but this would need some complex CSS which would be hard to follow along and also would be outside the scope of our support.

To understand what I mean, please see this screencast.

The code I used for the row is this.

$el {
  display: flex;
}

Tip: You can rename the Sections and Rows for easy management.

Hope that helps.