CODEWITHSUNDEEP
htmlcssbulma
Clément Rigo
Clément Rigo

Reputation: 430

Bulma - Column size is-half still applied on tablet mode with the is-desktop class

I have two columns (one with is-half class) that I want to "stack" (one on top of each other) on mobile AND tablet mode.

As from the documentation I have used <div class="columns is-desktop"></div> But it is not working properly.. On tablet, columns are stacked but the first column, which has a is-half class, remains half sized.

Here's a snippet to illustrate the issue: 

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<div class="container">
  <div class="columns is-desktop">
    <div class="column is-half">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
    </div>
    <div class="column">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
    </div>
  </div>
</div>

Or a JSFiddle Example

I want the is-half column to be fullwidth on tablet mode.

Upvotes: 0

Views: 710

Answers (2)

user3589620
user3589620

Reputation:

It is not a bug. That's the expected behaviour.

<div class="columns is-desktop"></div>

has display: block until desktop

@media screen and (min-width:1024px){.columns.is-desktop{display:-webkit-box;display:-ms-flexbox;display:flex}}

.is-half has width: 50%

.column.is-half,.column.is-half-tablet{-webkit-box-flex:0;-ms-flex:none;flex:none;width:50%}

It's like

div {
  border: 1px solid;
}

.half {
  width: 50%;
}
<div class="half">half</div>
<div>fullwidth</div>

between 768px and 1024px.

Solution

(Don't set .is-half)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="container">
  <div class="columns is-desktop">
    <div class="column">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
    </div>
    <div class="column">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
    </div>
  </div>
</div>

If you want to have other sizes, e.g. for desktop, use .is-x-desktop

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="container">
  <div class="columns is-desktop">
    <div class="column is-8-desktop">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
    </div>
    <div class="column">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
    </div>
  </div>
</div>

Upvotes: 2

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Change Class Name is-half to is-half-desktop 

<div class="container">
      <div class="columns is-desktop">
        <div class="column is-half-desktop">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
        </div>
        <div class="column is-half-desktop">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
        </div>
      </div>
    </div>

https://jsfiddle.net/wtprmwsh/2/

Upvotes: 2

Related Questions