Add margin to column

Hey there,
I’d like to achieve this look https://prnt.sc/plx9pe
So far I used the new options in the theme and achieved this with gap width and height for the columns.
https://prnt.sc/plx91n
Now I would like to add margins to finish the desired layout. The only problem: I can’t add margins to column :frowning:
How can I do it? thanks for your help!

Hello @zerotoone.de,

Thanks for writing in!

If you use the left and right column margin, the alignments of the columns will be messed. This is why the margin settings is not present in the column element settings. I would recommend that you use the gap element and image element inside your columns so that you can achieve the example layout.

Alternatively, if you enable the Flexbox Layout in the column settings, you vertically align the elements inside the columns with different alignment which might be able to achieve what you have in mind.

Hope this helps.

Its not about the elements IN the column, its the column itself I’d like to add a top or bottom margin to.

Hi @zerotoone.de,

Please add this code to the Column’s element CSS:


$el {
    margin: 10px 0 !important;
} 

Hope this helps.

thank you, but this did nothing to the column

Hi @zerotoone.de,

Please adjust the CSS to this:

$el.x-column{ /*For old column theme structure*/
margin:10px 0;
}
$el.x-col{ /*For updated theme structure*/
margin:10px 0;
}

Hope this helps.

thank you, I added !important and now it does something. so that what I came up with https://prnt.sc/pnh53h
Is that the correct way to do this or do you have a hint for me how I can achieve a better result?

Hi @zerotoone.de,

Thank you for sharing the actual URL. We can help you better when we are seeing the big picture on why you need it.

Although your approach works, using negative margin is not recommended. It causes issue especially in IE. Also, when you set FLEX LAYOUT to on for Columns, it sets margins automatically for the aligment that is specific for columns. That is the reason why for above custom margin CSS, you need to add important to override existing margins.

Here’s the better approach without using negative margin.
1.) Use 4 columns.
2.) First and last column FLEXBOX LAYOUT is ON, then ALIGN VERTICAL is set to CENTER.
3.) On first and last column, add one image each.
4.) On second and third column, add 2 image on each column. The first image on each column, add bottom margin.
5.) Add the GAP element, on top of the image on FIRST and SECOND column.

Add the other designs that you need. But those steps should cover the structure you want.
Here’s a screencast: https://screencast-o-matic.com/watch/cq6Z27uHR5

Hope this helps.

thank you very much for this detailed help! I’ll give it a try

Hey @zerotoone.de,

Yes sure, do let us know how it goes.

Cheers!

how can I size down the column gap on smaller screens?

Hi @zerotoone.de,

You can use a responsive unit like vw on your gap size so it will automatically respond to the screen width.

What are viewport units?

You can also, create two instances of Gap element with different size, one for desktop view and one for mobile view, then you can switch these Gap elements using the Hide During Breakpoints features.

Thanks,

thank you, I nailed it now :smiley:

You’re always welcome @zerotoone.de.

Cheers!

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