Add margin-right to margin less columns

[nward85]

I am trying to create a Row with three equal height columns. In each column I have a Headline and either a Content area or Text area. I am trying to add a margin-right to the first two columns when viewing on desktop. Here are my Settings and Element CSS:

##Row

##First and Second Column CSS
@media (min-width: 768px) {$el{margin-bottom:0!important;margin-right:4%!important;}}
@media (max-width: 767px) {$el{margin-bottom: 4%!important;margin-right:0!important;}}
##Last Column CSS

@media (max-width: 767px) {$el{margin-right:0!important;}}

##What it looks like so far on desktop

##What it looks like so far on mobile

##The main issue I am having
I need to add a margin to the right of the first and second column when viewing on desktop, and a zero margin to the right when viewing on mobile.

[thai]

Hi There,

I recommend you use this solution https://theme.co/apex/forum/t/multiple-rows-of-same-height-columns-on-one-page/37620/5 instead of the marginless column.

Hope it helps

[nward85]

@thai This is working well so far, only issue I am having is on mobile view, there is no space between the columns.

This is my Row CSS

$el{display: flex;}
@media (max-width: 767px) {$el{flex-direction: column;justify-content: space-between;}}

[thai]

Hi There,

Please add the equal-height to your row then add this custom CSS:

@media (max-width: 767px){
     .equal-height .x-column {
         margin-bottom: 25px;
     }
}

Hope it helps

[nward85]

I just changed my column CSS to this:

$el{display: flex; flex-direction: column;justify-content:start;}
@media (max-width: 767px) {$el{margin-bottom:4%;}}

All works now.

[christian]

Glad it’s working now.