CODEWITHSUNDEEP
cssbulma
Christopher Shroba
Christopher Shroba

Reputation: 7574

Why are my bulma columns wrapping, despite not having is-multiline set?

I'm using Bulma for column management, and it has a is-multiline class that can be used to allow columns to wrap. However, I'm not using this class, but my columns are still wrapping.

Expected Behavior:

Two columns are always side-by-side, on the same row

Actual behavior:

At certain viewport widths, the second column goes below the first column instead of beside.

Question

If you're familiar with Bulma, would you mind taking a look at this simple example and letting me know if I'm doing something obviously wrong? Thanks so much!

HTML

<div class="body">
  <div class="columns">
    <div class="column row-name is-narrow">
      Row 1
    </div>
    <div class="column row-cells">
      Some data
    </div>
  </div>
</div>

CSS

.body {
  width: 600px;
  background-color: #000;
  margin: 0 auto 0;
}
.row-name {
  background-color: #ffff0088;
  width: 50px;
}
.row-cells {
  background-color: #ff000088;
}

A JSFiddle: https://jsfiddle.net/8ggyagxp/10/

Upvotes: 3

Views: 2923

Answers (1)

Christopher Shroba
Christopher Shroba

Reputation: 7574

It turns out if Bulma detects that your viewport is mobile sized, it will stack columns unless the is-mobile class exists on the columns. See here for more information.

Upvotes: 6

Related Questions