Bulma: .container should have left/right margin of 20px (according to docs)

Created on 21 Dec 2016 · 16Comments · Source: jgthms/bulma

From docs:

On mobile and tablet, the container will have a margin of 20px on both the left and right sides.

This doesn't seem to occur and doesn't seem to be included in elements/_other.sass

I'll gladly submit a pull request, but not sure if docs are correct, or if source is correct.

Source

jwalton512

👍14

Most helpful comment

I used to believe this was an issue, but after becoming more familiar with Bulma I believe you're supposed to use sections, which have padding built into them: http://bulma.io/documentation/layout/section/

<body>
  <section class="section">
    <div class="container">
      <h1 class="title">Section</h1>
      <h2 class="subtitle">
        A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
      </h2>
    </div>
  </section>
</body>

ryanio on 8 Jul 2017

👍27 🎉4 👎4 ❤1

All 16 comments

Also, on widescreen (>1180px) its max-width is 1200px, and this is not explicitly said in the documentation, that does only says it is at most 960px on >950px screen.

tomsotte on 4 Jan 2017

Any update on this?

I just started with bulma. Should i add side margins for container?

keevitaja on 18 Feb 2017

@jgthms are you able to provide an update -- i have no problem submitting a pull request.

jwalton512 on 13 Mar 2017

Just discovered this too. The stylesheet on the documentation is slightly different to the one downloaded. Docs has a max-width on the container but neither the docs nor the download have a margin on the container.

Additionally, if you put a .container inside a .section as per in the docs, the container is offset from the left inside the section's padding, but falls off the page on the right because it has a fixed width. Screenshot taken with browser width at 1004px width. Can be replicated by putting the documentation container inside a .section.

darylknight on 6 Apr 2017

Updates?

darylknight on 28 Apr 2017

ryanio on 11 May 2017

👎4

can confirm, the margins seem to be missing on mobile / tablet

apocalyarts on 6 Jul 2017

Also having this issue.

sejr on 7 Jul 2017

<body>
  <section class="section">
    <div class="container">
      <h1 class="title">Section</h1>
      <h2 class="subtitle">
        A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
      </h2>
    </div>
  </section>
</body>

ryanio on 8 Jul 2017

👍27 🎉4 👎4 ❤1

@ryanio that is what I end up doing. my main reason for opening the issue was that the docs doesn't seem to match the source. I'd be happy to submit a pull request, but not sure if it is the docs or the source that needs to be updated.

jwalton512 on 10 Jul 2017

👍4

In the case of this issue added with the #1017 you have no margin on the menu in the only way it works fine.

EDIT: added image.