Bulma: Reset the offset on columns

Created on 14 Sep 2017  路  5Comments  路  Source: jgthms/bulma



Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.5.2]


Description

Forgive me if this is currently possible and I'm just unable to find out how, but I think Bulma needs is-offset-0-xxx classes in order to reset the columns at certain breakpoints.

column is-offset-3 is-6 is-offset-0-desktop is-4-desktop

The above example: if I have a column that I want to be centered (or slightly offset, whatever) on tablet or mobile, but on desktop would like to go back to a two-column layout side-by-side, AFAIK, there's no way to do so without adding empty columns like is-3 is-hidden-desktop. That workaround works, but not an ideal solution.

Expected behavior

Be able to use is-offset-0-XXX to reset column offsets at various breakpoints.

bulma feature pinned

Most helpful comment

I just sent a PR for this issue: https://github.com/jgthms/bulma/pull/2290

All 5 comments

This would be a brilliant feature! I feel at present it's a bit of an oversight in Bulma's responsiveness classes.

For instance, I'm wanting to apply is-offset-3 on desktop.... but on mobile I want that offset reduced to is-offset-1.

Using your recommended approach @chasegiunta I'd use is-offset-3-desktop is-offset-1-mobile. This follows Bulma's naming conventions, and is perfectly logical.

If anyone has an alternate suggestion, I'm all ears!

Why doesn't offset use max-width instead? The offset is applied to desktop, how do I avoid it? Tho, I think I might overlooked how to use Bulma / convention.

column is-8-tablet is-offset-2-tablet is-4-desktop

I tried to use this without even realizing that It's not available. Count this as my vote!

I've come across the same issue and need some sort of offset reset for desktop

I just sent a PR for this issue: https://github.com/jgthms/bulma/pull/2290

Was this page helpful?
0 / 5 - 0 ratings