need to remove color section but some matter came up.

Hi,

That is the default content padding. You can adjust it with this css code.

@media only screen and (max-width: 767px) {
.content, .sidebar {
    padding-top: 10px;
}
}

Best regards,
Ismael

Hi,

Did you enable the Performance > File Compression settings? Please disable those options while you’re editing the site.

Best regards,
Ismael

Hi,

There are two dropdown options under this text:

File Compression
In order to increase the speed of your website you can activate file merging and compression for your CSS and Javascript files. This will reduce and optimize the amount of code loaded.

Please note: By default compression is enabled. It is recommended to only disable the feature when you encounter errors (some server environments might cause trouble with active compression) or while you are actively developing your website and are adding new CSS rules or Javascript functions.

Please try to disable those options.

Best regards,
Rikard

Hi,

The stylesheets and scripts are still minified because of the Autoptimize plugin. We disabled it temporarily along with your cache plugin W3 Total Cache. Please enable those plugins back once you’re completely done with the site.

Best regards,
Ismael

Hi,

This css code should help but it will affect all 1/4 columns.

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .flex_column.av_one_fourth {
    margin: 20px 1% 0 0;
    float: left;
    width: 49%;
}
}

Turn on the custom css class field if you want to apply this modification for specific columns.

// https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

Best regards,
Ismael

Hi,

Have you tried adding a custom css class attribute to those columns? Please review the doc that I provided above.

Best regards,
Ismael

Hi,

Did you adjust the css modification base on the custom css class attribute? How did you adjust it? The code should look something like this:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .flex_column.yourcustomcssclass {
    margin: 20px 1% 0 0;
    float: left;
    width: 49%;
}
}

The selector “.yourcustomcssclass” should be replaced with the custom css class attribute.

Best regards,
Ismael

Hi,

Instead of adding a custom css class attribute to the columns, I just named the color section “ngavy-coffee” using the Section ID field and then applied it to the css modification above.

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #ngavy-coffee .av_one_fourth {
    margin: 20px 1% 0 0;
    float: left;
    width: 49%;
}
}

Screenshot: https://imgur.com/a/Des4USS

Best regards,
Ismael