Creating space between columns on mobile?

[freedomdesign]

Hi there,

I often have this situation where I wish to use different color backgrounds for columns across the page, but it causes them to all join together (no margin) on mobile - as the image below.

If I add margin using inline css the page display always breaks (out of alignment etc).

Is there a way to create some empty space between these columns on mobile?

I wish they would break into 2x2 on tablet, rather than go straight from 4x1 to 1x4, but that might be asking a bit much?

http://www.evergreen-hakuba.com/en/summer-camp-2018/

Thanks in advance!

[nabeel]

Hi there,

Thanks for writing around! To display 2 columns before the mobile display and add margins just add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 767px) {
    .page-id-7010 .el21.x-section .x-column {
        margin-bottom: 1%;
        width: 49%;
        margin-right: 1%;
    }
}

@media screen and (max-width: 480px) {
    .page-id-7010 .el21.x-section .x-column {
        margin-bottom: 5%;
        width: 100%;
        margin-right: 0;
    }
}

Let us know how this goes!

[freedomdesign]

Perfect, thank you!!

Can I use code like this but set a class, and have the same effect on any rows with this class anywhere on the site?

Or, if I need the same effect on another page / section etc, how do I add extra page IDs?

Thanks in advance!

[nabeel]

Hi again,

If you give your section a unique class then page ID won’t be needed then you can use the above code like this:

@media screen and (max-width: 767px) {
    .my-section .x-column {
        margin-bottom: 1%;
        width: 49%;
        margin-right: 1%;
    }
}

@media screen and (max-width: 480px) {
   .my-section .x-column {
        margin-bottom: 5%;
        width: 100%;
        margin-right: 0;
    }
}

Hope this helps!

[freedomdesign]

Thank you!

To have the same effect in more than one place, can I have more than one section on the site with the same class, or do I need to have the code multiple times with unique classes?

[jade]

Hi there,

You do not have to write more codes, you simply just have to assign my-section class to the sections that you want to replicate the same functions.

Hope this helps.