Marginless Columns Gap

Support
#1

Hello,

I have been attempting to add a 10px gap between marginless columns 1/2 1/2. I.e. 1/2 10px 1/2

vf.systematicprint.com/recipes/starters/summer-rolls/

I have already tried adding a margin with marginless columns turned off, however the two boxes are not aligned and do not fill available space within the column. It would be far simpler in my view to add a 10px gap using CSS and marginless columns switched on.

Please could someone suggest the best way to do this?

Thank you

#2

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

@media (min-width: 980px){
    .page-id-759 #x-section-1 > div.x-container.max.width.marginless-columns > div:nth-child(1) {
        margin-right: 5px;
        width: calc(50% - 5px);
        display: inline-block;
    }
    .page-id-759 #x-section-1 > div.x-container.max.width.marginless-columns > div:nth-child(2) {
        margin-left: 5px;
        width: calc(50% - 5px);
        display: inline-block;
        min-height: 546px;
    }
}
#3

Thank you, a slight modification and it is working…

@media (min-width: 768px){
.page-id-759 #x-section-1 > div.x-container.max.width.marginless-columns > div:nth-child(1) {
    margin-right: 5px;
    width: calc(50% - 5px);
    display: inline-block;
    min-height:550px
}
.page-id-759 #x-section-1 > div.x-container.max.width.marginless-columns > div:nth-child(2) {
    margin-left: 5px;
    width: calc(50% - 5px);
    display: inline-block;
    min-height:550px
}

{
@media (max-width: 767px){
    .page-id-759 #x-section-1 > div.x-container.max.width.marginless-columns > div:nth-child(1) {
    margin:-10px 0 -10px 0;
}
.page-id-759 #x-section-1 > div.x-container.max.width.marginless-columns > div:nth-child(2) {
    margin-top: 0px;
}

}

However, when the right column text increases the height of the column, is it possible for the left column to follow suit and increase in height?

Many thanks

#4

Hi There,

There is a reason why that option is called marginless columns. How about we put a right-border on the left column to serve as a pseudo spacing (https://prnt.sc/frt273). If you like the idea, please add this on the STYLE field of the left column.

border-right: 10px solid #fff;

Cheers!

#5

Thanks for that. I agree however there are further benefits of using marginless columns by the fact they are responsive and therefore do not require unnecessary additional CSS.

I have used your idea above in conjunction with the previous to achieve my outcome

@media (min-width: 768px){
.page-id-759 #x-section-1 > div.x-container.max.width.marginless-columns > div:nth-child(1) {
    border-right: 10px solid #fff;
}
}

@media (max-width: 767px){
.page-id-759 #x-section-1 > div.x-container.max.width.marginless-columns > div:nth-child(1) {
    margin:-10px 0 -10px 0;
}
.page-id-759 #x-section-1 > div.x-container.max.width.marginless-columns > div:nth-child(2) {
    margin-top: 0px;
}
}

Thank you all for your advise

#6

Cool, glad we could help :grinning:

Cheers,

#7

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