CODEWITHSUNDEEP
cssflexboxbulma
user3589620
user3589620

Reputation:

Change column count in different views

Two columns in mobile view and three columns in desktop view.

Example

* {
  border: 1px solid;
  box-sizing: border-box;
}

.flexbox {
  display: flex;
  flex-wrap: wrap;
}

.flexbox>div {
  width: 33.333%;
}

@media screen and (max-width: 768px) {
  .flexbox>div {
    width: 50%;
  }
}
<div class="flexbox">
  <div>DIV 1</div>
  <div>DIV 2</div>
  <div>DIV 3</div>
  <div>DIV 4</div>
  <div>DIV 5</div>
  <div>DIV 6</div>
</div>

I was wondering, how you would do this with bulma.

Attempt

<div class="columns is-mobile is-multiline">
  <div class="column is-4-desktop is-6-mobile">DIV 1</div>
  <div class="column is-4-desktop is-6-mobile">DIV 2</div>
  <div class="column is-4-desktop is-6-mobile">DIV 3</div>
  <div class="column is-4-desktop is-6-mobile">DIV 4</div>
  <div class="column is-4-desktop is-6-mobile">DIV 5</div>
  <div class="column is-4-desktop is-6-mobile">DIV 6</div>
</div>

In mobile view it is correct, but not in desktop view.

What is missing?

JSFiddle

Upvotes: 3

Views: 1264

Answers (1)

i3lai3la
i3lai3la

Reputation: 980

You must define tablet size as well to fit your desktop size since the size in between desktop and mobile is tablet for bulma.

 <div class="columns is-mobile is-multiline">
      <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 1</div>
      <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 2</div>
      <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 3</div>
      <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 4</div>
      <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 5</div>
      <div class="column is-4-desktop is-4-tablet is-6-mobile">DIV 6</div>
    </div>

Upvotes: 3

Related Questions