CSS !important on wp-block-column class

  • Resolved keepact

    (@keepact)


    6 years, 11 months ago

    I’ve converted all of my sections (custom html) to the group block and I noticed that the plugin adds “(max-width: 599px) {.wp-block-column {flex-basis: 100%! Important}” and that makes me limited if I want to sort some items in 2 columns on mobile.

    If I add another css! Important will be an endless cycle. For now I had to go to the source of the plugin and delete this rule but it was very inconvenient!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Jorge Costa

    (@jorgefilipecosta)

    6 years, 6 months ago

    Hi @keepact,

    Unfortunately, columns assign their width via an inline style (as the width can be configured). The only way to overwrite the inline style is the usage of important.
    I think a way to solve that would be to add a class to the columns block you want to have multiple columns on mobile and then include a style similar to this one:

    (max-width: 599px) {
    .wp-block-column.my-custom-class {
    flex-basis: … important;
    }
    }

    If you want to make this more user-friendly, you can register a custom block style for columns with multiple columns on mobile.

    I hope you find my answer useful, feel free to comment if you need additional clarification.

Viewing 1 replies (of 1 total)

The topic ‘CSS !important on wp-block-column class’ is closed to new replies.