NO BUG: Generated CSS order makes page brake on mobile

Bugs
1

When I create a class to style an element for mobile it gets overwritten by the desktop styling.

For example:
When I create a new class (.mobile_padding_20) and style it on mobile break point. then I create another class (.padding_50) and style it on desktop.

The (.mobile_padding_20) is overwritten by (.padding_50)

The reason is because the generated css are going to be like this :

@media (max-width: 478px) {
 .mobile_padding_20 {
  padding:20px;
 }
}

.padding_20 {
 padding:20px;
}

}```
2

Hi Yaya,
Thanks so much for your report!

The behavior is to be expected since you are using two different classes on one element that affect the same property. Here the order is crucial.

You probably added .mobile_padding_20 first and then .padding_50 - accordingly, .padding_50 overrides the mobile class because it comes after it in the code. CSS styles are read from top to bottom. If you change the order, you’ll probably get a different result.

In general, you could make your life much easier by just using a single class that adds 50px on the desktop and change the value to 20px on the mobile breakpoint.

Best regards,
timmse

3

Thank you for your reply, you are right the order of making classes will affect the result. and having a single class will make this problem disappear. but I have some cases where I need to create a class for a specific viewpoint.

But I really hope this is fixed/improved in the next update. forcing the order of css based on viewpoint also I believe the the way Bricks Builder generating the css are causing the current output which appears to be unnecessary!

/* BREAKPOINT: Desktop (BASE) */
.service-card {
 display: flex
}
/* BREAKPOINT: Mobile landscape */
    @media (max-width: 767px) {
        .service-card-spacing {
            padding-top: 0
        }
    }
/* BREAKPOINT: Desktop (BASE) */
.service-card {
 flex-direction: column;
}

Thank you