Bulma: is-gapless columns and offset in column

[rvelhote]

Checklist

• [x] This is about the Bulma CSS framework
• [ ] This is about the Bulma Docs
• [x] I'm using Bulma version 0.2.1
• [x] My browser is: Firefox 49 Ubuntu 16.04
• [ ] This is a Sass issue: I'm using version [x.x.x]
• [x] I am sure this issue is not a duplicate?
  

  Description

Using gapless columns and a column with an offset will cancel the offset. I believe this is related to CSS precedence.

These are the rules that are applied by the browser. The margin-left on the offset class is cancelled by is-gapless.

.columns.is-gapless > .column {
    margin: 0;
    padding: 0;
}
.column.is-offset-half-desktop {
    margin-left: 50%;
}

In my case I wanted to have the offset on desktop but not on mobile.

Steps to Reproduce

The following code will replicate the issue

<div class="container is-fluid">
    <div class="columns is-gapless">
        <div class="column is-half-desktop is-offset-half-desktop">Offset</div>
    </div>
</div>

Expected behavior

I expect the offset to be respected and maintained. is-gapless should only remove the margins and paddings and classes related to positioning should not be affected by the removal of margins.

Actual behavior

Using gapless columns and a column with an offset will cancel the offset making the column move to the left and destroying the layout.

Thank you ;)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[glenndevenish]

It's this line: https://github.com/jgthms/bulma/blob/1083f017a06b44d6f1e315de2b384798e69aeb35/sass/grid/columns.sass#L446

If you get rid of margin: 0, everything works as normal (i.e. is-offset-X is allowed to set margins again)

Two options, change the specificity, so that is-offset-X is !important, or get rid of the margin: 0 above - it doesn't appear to make much difference when I remove it.

[glenndevenish]

What you could also do if you didn't want!important is add .columns.is-gapless > .column.is-offset-X rules, which would involve basically duplicating /sass/grid/columns.sass

[ParallelUniv3rse]

Why is the fix not merged yet? Could I help with some work on the PR? Just bumped into this almost three year old issue today. I'd consider it quite a critical flaw in the styling...