CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Dominik Smolinský
Dominik Smolinský

Reputation: 71

my bootstrap page doesnt show properly on mobile devices

After few courses and small webs, im trying to create my first bigger page. When i looked it on PC either i resize the chrome page to the smallest width, it looks good, but when i open it on mobile, it looks weird like so far or the elements are too small. Im using bootstrap as a framework. Can you help me? Thanks! picture1

Here is whole code of web: https://codepen.io/dominik-smolinsk-/pen/yLgPNmo

<div class="quiz hide container-fluid">
  <div>Score:<span class="score">0</span>/6</div>
  <h1 class="text-center quest">Question?</h1>
  <div class="container">
    <div class="row text-center" style="font-size: 1.2em;">
      <div class="col-lg-6 b bt1 p-1 m-1">
        <p class="an1">Answer1</p>
      </div>
      <div class="col-lg-6 b bt2 p-1 m-1">
        <p class="an2">Answer2</p>
      </div>
      <div class="col-lg-6 b bt3 p-1 m-1">
        <p class="an3">Answer3</p>
      </div>
      <div class="col-lg-6 b bt4 p-1 m-1">
        <p class="an4">Answer4</p>
      </div>
    </div>
    <button type="button" class="btn btn-secondary nextQ hide">Next Question</button>
  </div>
</div>

Upvotes: 0

Views: 46

Answers (1)

Sambhu Dayal Sharma
Sambhu Dayal Sharma

Reputation: 247

You forgot to add this meta tag in the head section

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

Upvotes: 1

Related Questions