Bulma: Bulma has problem with Chrome for mobile

[thanhngch]

Overview of the problem

This maybe a bug with mobile
This is about the Bulma CSS framework
I'm using Bulma version v0.4.2
Bulma don't work ok on mobile with Chrome. FireFox work, but chrome not.

Description

Steps to Reproduce

1. In body tag, I add

    <div class="container">
      <div class="columns">
        <div class="column"> <p>Some long text</p>
        </div>
      </div>
    </div>

1. It have a scoll horizontal in chrome for mobile
   (Go to https://dansup.github.io/bulma-templates/templates/blog.html to see same problem)
   

Expected behavior

I don't want this scoll horizontal

[shaun-sweet]

This isn't a bulma thing, look at any webpage on mobile that is capable of vertical scrolling.

::-webkit-scrollbar {
display: none;
}

Try that

[xlcrr]

Same problem here

div class="container" also not working on mobile

[philippeluickx]

I'm using 0.6.1 and I can confirm that Bulma has issues on mobile.
In my case it is caused by the -0.75rem margins on the columns div. When I reset those to 0, I don't have a horizontal scroll anymore.

[frederikhors]

Any news on this?

[jgrandar]

For me, this is what I get on Android by adding next tags to the head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Chorme mobile: gap at right and bottom.
Firefox mobile: double gap at right, one of them horizontal scrollable.
Safari 10 mobile: gap at right.

With:

<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no">

Chrome mobile: no gaps.
Firefox mobile: gap at right.
Safari 10 mobile: gap at right.

[erquhart]

@jgrandar unfortunately that solution is not great for accessibility: https://a11yproject.com/posts/never-use-maximum-scale/

By setting maximum-scale=1.0, you are disabling the functionality to use pinch zoom on certain mobile devices, forcing people to view your page a certain way.

The attribute is set as user-scalable="yes" by default, which means that people are able to control the zoom setting for the page they’re visiting. Changing it to user-scalable="no" would prevent zoom settings from working on both mobile and desktop devices.

[stale[bot]]

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.

[abdullahe]

So is there any solution to this without messing up with accessibility?