Support » Plugin: Gutenberg » change the gutter width when using two columns

  • Resolved loosefast

    (@loosefast)


    I’m looking for the best way to change the gutter width when using two columns. It appears to be too wide. What would work would be to just remove the margin-left: 32px; from the second column. However, both columns have the same div.wp-block-column and I don’t see a way in Gutenberg to add an dditional CSS Class to the second column. What is best solution?

    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Mel Choyce

    (@melchoyce)

    Hey @loosefast, you could use something like:

    .has-2-columns .wp-block-column:nth-of-type(2) {
        margin-left: 0;
    }

    It targets the second instance of .wp-block-column in a 2-column block.

    @melchoyce Thanks!

    Looks MUCH better!

    loosefast

    Moderator Mel Choyce

    (@melchoyce)

    Awesome, glad I could help!

    JS

    (@jsylvia90)

    Hi,

    I used the same technique as Mel mentioned for a different application technique to apply variable column widths. You can see a sample here: https://wordpress.org/support/topic/tip-for-variable-columns/

    Plus for more precise CSS class selection you can always add a CSS class in the right settings column Block tab under the Advanced dropdown… just don’t put a “dot” in front of the class name. Then update and you will see the class assigned to the block. (Hope this explanation is clear.)

    Good luck and Happy New Year.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.