Sub columns of a variable columns have weird gap #3089
Description
This is about Bulma.
Overview of the problem
This is about the Bulma CSS framework variable columns
I'm using Bulma 0.9.0
Description
When you use a variable column, all child columns have variable padding (but not the margin of the columns).
I think you need a direct child selector: .columns.is-variable > .column
If your intention is to set for every child columns, you need to specify the columns margin too.
.columns.is-variable .columns
margin-left: calc(-1 * var(--columnGap))
margin-right: calc(-1 * var(--columnGap))Steps to Reproduce
Use a columns variable with child columns like this DOM
<div class="columns is-variable is-1">
<div class="column is-3">
<div class="bd-notification is-primary has-text-centered">
Side
</div>
</div>
<div class="column is-9">
<div class="bd-notification is-primary has-text-centered">
Main
<div class="columns">
<div class="column is-3">
<div class="bd-notification is-warning">
child 1
</div>
</div>
<div class="column is-9">
<div class="bd-notification is-info">
child 2
</div>
</div>
</div>
</div>
</div>
</div>Expected behavior
Has gap like this:
Actual behavior
The screenshot:
Metadata
Metadata
Assignees
Labels
No labels