Sorting Media Queries automatically

Forums Ideas Sorting Media Queries automatically

This topic contains 15 replies, has 7 voices, and was last updated by  Gabriela Pavlova 5 months, 2 weeks ago.

Viewing 16 post (of 16 total)
  • Author
  • Gabriela Pavlova
    Bootstrap Studio Developer

    TL;DR – Unfortunately, it is not possible to reorder blocks in the Styles tab.

    The Styles tab shows all the CSS blocks (from all your css files) for the current component ordered by priority. Keeping this in mind, unfortunately it would be virtually impossible to add the ability to reorder them there.

    Let’s say you see this in the Styles tab:

    .btn { // from buttons.css
        background-color: blue;
    .btn { // from forms.css
        background-color: green;

    In this case, the button is blue, because the buttons.css file is included after the forms.css file. In order for the second block to take priority, we would either have to a) change the include order of their respectful .css files or b) move the second block from forms.css to buttons.css after the first block. Neither of those is a thing the app should be doing automatically, hence neither is a viable option.

    Even if we only consider blocks from the same file, a simple reordering wouldn’t work for prioritizing a block over another.

    For example, say in styles.css you have:

    .description {
        font-size: 1rem;
    p.description {
        font-size: 1.2rem;

    Now in the Styles tab p.description would be above .description. But even if we changed their order in styles.css, p.description would still be shown before .description, as it has higher priority.

Viewing 16 post (of 16 total)

You must be logged in to reply to this topic.