Adding margins to columns to elevate to midway through section

I am looking to add margins to the bottom of the three columns in the attached screenshot. The goal is to boost them up so that they are halfway between the previous section background color and the section that they are in’s background color. How would I go about doing that? Attached is a screenshot fo my version as of right now and a screenshot of the mockup I am looking to emulate.

Hi There,

Thanks for writing in!
to add margin bottom to your columns please click on customize tab of your column.

in the element CSS please add this code.

$el{
 margin-bottom: 20px !important;
}

Hope this helps!

Unfortunately that seems to just add space below the column block, not push the content up so that it is halfway between the sections.

Ah, the key was adding negative top-margin.

I do have a new issue now. On mobile it stacks the items. Can you write a media query so that it only adds the negative margin before it breaks for mobile?

Hi there,

That is because of the negative top margin you have added disrupts the mobile alignment.

Please be careful in using negative margin as you will have layout issue on mobile just like this.

To solve this, you can wrap the code you have added in the Element CSS in a media query so that the negative margin will only take effect on desktop.

Please update it to:

@media (min-width: 768px) {
    $el {
         margin-bottom: -20px !important;
    }
}

Here are some reference links related to the suggestions above:

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