Adding a new padding-[size] class

In one of my projects there was a need to add a new padding size (in this case it was .padding-xxxlarge).

I noticed that this new padding overrode left-right 0rem from .padding-vertical.

Of course, all other paddings work fine and Global Styles were not changed.

Should I modify anything else to make it works?

I’ve noticed that the order in CSS sheet (looking at a browser’s console) is different between current styles and added ones.

@Support-Luis any idea why this is happening?

Hi @filip.radkiewicz !

Please, could you share your project read-only link? We will check for you, thanks!

Sure: Webflow - Calamari

@evekayser any idea?

Hi @filip.radkiewicz ! We are still checking with the team. Sorry for the late response.

For now, I would suggest you to use one of the padding-customs we have, like padding-custom1. You can update the padding sizes and rename padding-custom1 to padding-xxxlarge if you want.

Thanks for bringing this up :pray:

1 Like

@filip.radkiewicz Hi, actually the recommended approach is to use the CSS Style Reorder from Finsweet Extension.

You can check in this video below:

Thanks :wink:


Woow! That’s awesome. Everything’s is clear now :slight_smile:

Thanks a lot!