Differents padding with breaking points

Support
#1

Hello,
You can see here that the padding of the 2/3 row is 60, but it’s too much when we see the page in mobile view. How can i change that padding for mobile, and also how can i change padding for each others breaking point ?

#2

Hi,

You can add a unique class to your 2/3 columns.

You can then change the padding by targetting that class.

eg. Add this in Cornerstone > Settings > Custom CSS


@media (max-width:767px) {
    .x-column.my-column {
           padding:30px;
    }
}

Hope that helps.

#3

thx, yep it helps ! :slight_smile:

Now how can i change padding with differents width size ?
I would like to have a 40 padding when breaking point hits 984 and a 20 padding when breaking point hits 767. I’ve tried this code but it don’t seems to be the right way to write it (767 don’t work anymore)

@media (max-width:767px) {
.x-column.my-column {
       padding:5px 20px !important;
}
}
@media (max-width:984px) {
.x-column.my-column {
       padding:15px 40px !important;
}
}
#4

Hi,

Please change your code to this.


@media (max-width:984px) {
.x-column.my-column {
       padding:5px 20px !important;
}
}

@media (max-width:767px) {
.x-column.my-column {
       padding:15px 40px !important;
}
}

You need to add the lower @media at the bottom.

Thanks

#5

ok thx !

I’ve tried to do the same with this one row page
class name is my-row and the code is :

   @media (max-width:767px) {
    .x-row.my-row {
           padding:20px !important;
    }
}

Why does this code not working ?

#6

Hi There,

Please try with this instead:

@media (max-width:767px) {
    .my-row {
           padding:20px !important;
    }
}
#7

Perfect, thx a lot !

#8

You’re welcome. Glad to be of a help :slight_smile: