Full-width Column Padding

Support
#1

Hi, I wanted my columns to have a default padding, so I added the below code to the css. The problem is my full-width images have been affected too. I can’t figure out how to tell the full-width image to override the css padding setting.

@media (max-width: 767px) {
#x-section-1 .x-column {
padding: 10px !important;
}
}
@media (min-width: 768px) {
#x-section-1 .x-column {
padding: 20px !important;
}
}
@media (min-width: 768px) and (max-width:1200px) {
#x-section-1 .x-column {
padding: 20px !important;
}
}

@media (min-width: 1201px) {
#x-section-1 .x-column {
padding: 30px !important;
}
}

#2

Hello Ravi,

Thanks for writing in!

I would highly recommend that you add a custom my-column class in your column and then you can make use of this custom css:

@media (max-width: 767px) {
    #x-section-1 .x-column.my-column {
        padding: 10px !important;
    }
}

@media (min-width: 768px) {
    #x-section-1 .x-column.my-column {
        padding: 20px !important;
    }
}

@media (min-width: 768px) and (max-width:1200px) {
    #x-section-1 .x-column.my-column {
        padding: 20px !important;
    }
}

@media (min-width: 1201px) {
    #x-section-1 .x-column.my-column {
        padding: 30px !important;
    }
}

You can leave the column containing your fullwidth images so that it will not be affected.

#3

Thank you for teaching me how to use a custom class. In the meantime i did the following:

@media (max-width: 767px) {
.Column_ScreenSizeBasedPadding
{
padding: 10px 10px 10px 10px !important;
}
}
@media (min-width: 768px) and (max-width:1200px) {
.Column_ScreenSizeBasedPadding
{
padding: 20px 20px 20px 20px !important;
}
}
@media (min-width: 1201px) {
.Column_ScreenSizeBasedPadding
{
padding: 30px 30px 30px 30px !important;
}
}

#4

You’re welcome!
We’re glad we were able to help you out.

#5

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