Bulma: is-half-mobile columns are not side by side

Created on 18 Apr 2018 · 10Comments · Source: jgthms/bulma

.column .is-half-mobile columns are not displaying side-by-side. All other breakpoints work as anticipated.

screen shot 2018-04-18 at 4 01 01 pm

<section class="section">
    <h1 class="title">Core</h1>
    <h2 class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing.</h2>

    <div class="columns is-multiline">

      <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop is-one-fifth-widescreen">
        <div class="card">
          <div class="card-image">
            <figure class="image is-square">
              <img src="img/luke-pighetti.jpg" alt="">
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-content">
                <p class="title is-4">John Smith</p>
                <p class="subtitle is-6">Founder</p>
              </div>
            </div>

            <div class="content">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Phasellus nec iaculis mauris.
            </div>
          </div>

          <footer class="card-footer">
            <p class="card-footer-item">
              <span>
                <a href=""><i class="fab fa-linkedin fa-2x"></i></a>
              </span>
            </p>
            <p class="card-footer-item">
              <span>
                <a href=""><i class="fab fa-twitter-square fa-2x"></i></a>
              </span>
            </p>
          </footer>
        </div>
      </div>

      <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop is-one-fifth-widescreen">
        <div class="card">
          <div class="card-image">
            <figure class="image is-square">
              <img src="img/gabriel-muresen.jpg" alt="">
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-content">
                <p class="title is-4">John Smith</p>
                <p class="subtitle is-6">Founder</p>
              </div>
            </div>

            <div class="content">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Phasellus nec iaculis mauris.
            </div>
          </div>

          <footer class="card-footer">
            <p class="card-footer-item">
              <span>
                <a href=""><i class="fab fa-linkedin fa-2x"></i></a>
              </span>
            </p>
            <p class="card-footer-item">
              <span>
                <a href=""><i class="fab fa-twitter-square fa-2x"></i></a>
              </span>
            </p>
          </footer>
        </div>
      </div>

      <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop is-one-fifth-widescreen">
              <div class="card">
                <div class="card-image">
                  <figure class="image is-square">
                    <img src="img/erik-mourin.jpg" alt="">
                  </figure>
                </div>
                <div class="card-content">
                  <div class="media">
                    <div class="media-content">
                      <p class="title is-4">John Smith</p>
                      <p class="subtitle is-6">Founder</p>
                    </div>
                  </div>

                  <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Phasellus nec iaculis mauris.
                  </div>
                </div>

                <footer class="card-footer">
                  <p class="card-footer-item">
                    <span>
                      <a href=""><i class="fab fa-linkedin fa-2x"></i></a>
                    </span>
                  </p>
                  <p class="card-footer-item">
                    <span>
                      <a href=""><i class="fab fa-twitter-square fa-2x"></i></a>
                    </span>
                  </p>
                </footer>
              </div>
            </div>


    </div>
  </section>

stale

Source

lukepighetti

👍1

Most helpful comment

What about adding an extra is-mobile class on the columns div :)

nadim1992 on 19 Apr 2018

👍5

All 10 comments

What about adding an extra is-mobile class on the columns div :)

nadim1992 on 19 Apr 2018

👍5

Worked! thanks!

lukepighetti on 19 Apr 2018

Though adding the is-mobile class to the columns div worked, this is not necessary to make the responsive classes work as expected for tablet or desktop viewports.

I believe this inconsistency should be addressed.

ivandov on 14 Jul 2018

👍3 👎1

Is this really the case? It's not very well thought out if so. There are responsive column helpers supposedly so that we can have multiple layouts depending on viewport size, but if we have to specify the .is-mobile on the columns wrapper, won't this fix the child columns to the mobile setting?

wrabit on 11 Mar 2019

Following this advice ( adding is-mobile) on a 4 column layout renders the last 2 columns not visible.

<section class="container product-row">
      <div class="columns is-mobile">
        <div class="column is-one-quarter-desktop is-half-mobile is-half-tablet">
           <img src="images/photo1.jpg">
        </div>

        <div class="column is-one-quarter-desktop is-half-mobile is-half-tablet">
          <img src="images/photo2.jpg">
        </div>

        <div class="column is-one-quarter-desktop is-half-mobile is-half-tablet">
          <img src="images/photo3.jpg">
        </div>

        <div class="column is-one-quarter-desktop is-half-mobile is-half-tablet">
          <img src="images/photo4.jpg">
        </div>
      </div>
    </section>

yoyowinkler on 4 Apr 2019

@yoyowinkler You have to add the class is-multiline to the columns div. See more at https://bulma.io/documentation/columns/options/#multiline

dredav on 8 Apr 2019

👍2

Same here. I don't want to add is-mobile, since other classes like is-one-fifth-desktop will be not able to work. Does anyone have any ideas?

Hentaro1989 on 13 Jun 2019

I solved it myself. And Sorry, I was using is-half. So it was a different issue.

is-one-fifth-desktop works. But is-half doesn't work on mobile size. The 6 div will drop out.

<div class="columns is-multiline">
  <div class="column is-half is-one-fifth-desktop">1</div>
  <div class="column is-half is-one-fifth-desktop">2</div>
  <div class="column is-half is-one-fifth-desktop">3</div>
  <div class="column is-half is-one-fifth-desktop">4</div>
  <div class="column is-half is-one-fifth-desktop">5</div>
  <div class="column is-half is-one-fifth-desktop">6</div>
</div>

Add is-mobile, then is-half works on mobile size. But is-one-fifth-desktop doesn't work...

<div class="columns is-multiline is-mobile">
  ...

Change is-half to is-half-touch. It completely work!

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

06-16-2019 8:42 AM JST
fix some typos

Hentaro1989 on 16 Jun 2019

.is-mobile should be added whenever you want to make the columns take affect in mobile. Expecting .is-x-mobile to work without a .columns.is-mobile parent is confusing and inconsistent with how the rest of bulma works. This ticket should be closed.

jontroncoso on 5 Nov 2019

👍1

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.