Column padding on desktop only?

Support
#1

site: https://tinyurl.com/yddm3jv2

my home page has 2 columns. i’ve added 1.5em padding to the right-side of column 1 and 1.5em padding to the left side of column 2.

see screenshots below.
column 1: https://imgur.com/a/goqE3
column 2: https://imgur.com/Hqi1U7W

this makes the UX a bit nicer on desktop (adds more space between the two main columns) but as you would guess, it does not translate well to mobile since these columns are of course stacked on top of each other on mobile (not side by side like on desktop).

so is there a simple way to make it so these padding settings do not apply to mobile view?

thanks

#2

Hi There,

To fix this issue, please add this custom CSS under X > Theme Options > CSS:

@media (max-width: 767px){
    .el3.x-column,
    .el5.x-column {
        padding: 0;
    }
}

Hope it helps :slight_smile:

#3

Thanks, this worked perfectly.

#4

You’re welcome.

#5

Quick update. The first column seems to work okay, but the second one doesn’t seem to be working correctly. I’ve cleared browser and server cache to make sure it’s not a caching issue, as well as tried adding !important to the CSS, but no luck.

Screenshot of issue: https://imgur.com/a/kOLhd

Any idea?

#6

Hi again,

Please replace the previous code with this:

@media screen and (max-width: 767px) {
    .el1.x-section .x-column {
        padding: 0 !important;
    }
}

Let us know how this goes!

#7

Perfect, thank you.

#8

You’re more than welcome, glad we could help.

Cheers!

#9

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