Search code examples
cssbulma

Bulma CSS not working properly on mobile viewport

What happened?

Bulma shows a small element on mobile devices when I was trying on it's official demo code below:

<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="zh-TW">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>

<body>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
      </a>

      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item">
                  Home
                </a>

        <a class="navbar-item">
                  Documentation
                </a>

        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
                    More
                  </a>

          <div class="navbar-dropdown">
            <a class="navbar-item">
                      About
                    </a>
            <a class="navbar-item">
                      Jobs
                    </a>
            <a class="navbar-item">
                      Contact
                    </a>
            <hr class="navbar-divider">
            <a class="navbar-item">
                      Report an issue
                    </a>
          </div>
        </div>
      </div>

      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <a class="button is-primary">
              <strong>Sign up</strong>
            </a>
            <a class="button is-light">
                      Log in
                    </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <section class="section">
    <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>
  </section>
</body>

</html>

looks good on desktop

enter image description here

but work badly on mobile (iPhone 12 Pro)

enter image description here

I've totally no idea what can I do next, I think this should work properly on mobile devices as their website.

enter image description here

Solution

  • Use viewport meta tag

    TL;DR. Use the <meta /> tag in your <head> area.

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

    When you view a webpage on a mobile device, by default, a wide layout is shrunk to fit the small size screen.

    This image illustrates it 👇 craigslist

    Quoting MDN page on Viewport meta tag:

    Some mobile devices and other narrow screens render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.

    This is done because not all pages are optimized for mobile and break (or at least look bad) when rendered at a small viewport width. This virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices.