CODEWITHSUNDEEP
htmlcssbulma
Scientaster
Scientaster

Reputation: 102

Responsive CSS has different rem sizes on mobile

I'm using the Bulma CSS Framework and I simply cannot get my site to be as responsive as their homepage.

The site is live. My < html > has the same font-size, and my dom structure is identical to bulma's main page. Yet mine looks awful on mobile.

Here's a snippet of my HTML page:

<html>

<body>
  <section class="hero">
    <div class="hero-body has-text-centered">
      <div class="container">
        <div>
          <h1 class="title">Tiny Text!</h1>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

<html class="route-index">

    <body class="layout-default" style="zoom: 1;">
      <section class="hero is-medium">
        <div class="hero-body has-text-centered">
          <div class="container">
            <h1 class="title">Somehow big text?</h1>
          </div>
        </div>
      </section>
    </body>

</html>

Bulma's page:

Bulma CSS Intro Page

My page:

My Intro page


You can test this through developer tools on chrome setting the viewport to mobile on both sites' main pages.

Upvotes: 3

Views: 1832

Answers (1)

Dotan
Dotan

Reputation: 7622

try adding this meta tag

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

This tells the browser to fit the page to the mobile screen, otherwise it gives you a 'desktop site' which is wider

Upvotes: 6

Related Questions