Search code examples
javascripttwitter-bootstrap

My responsive UI isn't responsive in bootstrap

I created a responsive Ui in bootstrap but my layout isn't responsive at all.

I can live with the desktop version, but it looks terrible on mobile and tablet. How can i fix this? and what exactly is the reason my layout behaves like that on smaller devices?

you can find a live version here: uncovered-muscle.surge.sh

Or take a look here for the code if you don't like clicking links

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

    <title></title>
  </head>
  <body>

    <!--Navbar -->
    <nav class="mb-1 navbar navbar-expand-lg navbar-dark indigo">
      <a class="navbar-brand" href="#">HOME</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-555"
        aria-controls="navbarSupportedContent-555" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent-555">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">exchange
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">community</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">How To</a>
          </li>
        </ul>
        <ul class="navbar-nav ml-auto nav-flex-icons">
          <li class="nav-item avatar">
            <a class="nav-link p-0" href="#">
              <img src="#" class="rounded-circle z-depth-0"
                alt="avatar image" height="35">
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <!--/.Navbar -->
    <div class="container">
      <div class="jumbotron card card-image" style="background-color:black;opacity: 0.8;">
  <div class="text-white text-center py-5 px-4">
    <div>
      <div class="row">
  <div class="col-sm-6">

  </div>
  <div class="col-sm-6">
    <div class="card">
       <div class="card-body">
         <h5 class="card-title" style="color:black;">Contract Balance</h5>
         <p class="card-text">
           <input class="form-control form-control-lg" type="text" placeholder="AGI" id="contractBalanceAgi"><br>
      <input class="form-control form-control-lg" type="text" placeholder="SNET" id ="contractBalanceSnet"></p>

       </div>
  </div>
</div>
    </div>
  </div>
</div>

    </div>
    <div class="container" style="background-color:black;opacity:0.8;" >
      <h1 style="text-align:center;color:white;">Invest</h1>
      <div class="row">
        <div class="col">
          <!-- Card -->
  <div class="card">

    <!-- Card image -->


    <!-- Card content -->
    <div class="card-body">

      <!-- Title -->
      <h4 class="card-title"><a>STEP 1</a></h4>
      <!-- Text -->
      <p class="card-text">Exchange rate per SNET</p>
      <!-- Button -->
      <h2 class="card-text"><img src="images/logo.png" class="rounded" style="width:15%">1 AGI</h2>
      <br>
      <h3>0.00000</h3>

    </div>

  </div>
  <!-- Card -->
        </div>
        <div class="col">
          <!-- Card -->
<div class="card">

  <!-- Card image -->


  <!-- Card content -->
  <div class="card-body">

    <!-- Title -->
    <h4 class="card-title"><a>STEP 2</a></h4>
    <!-- Text -->
    <p class="card-text">Amount of AGI</p>
    <!-- Button -->
    <input type="number" id="exampleForm2" class="form-control">
    <br>
    <h4>AGI available</h4>
  </div>

</div>
<!-- Card -->
        </div>
        <div class="col">
          <!-- Card -->
<div class="card">

  <!-- Card image -->


  <!-- Card content -->
  <div class="card-body">

    <!-- Title -->
    <h4 class="card-title"><a>STEP 3</a></h4>
    <!-- Text -->
    <p class="card-text">You receive</p>
    <!-- Button -->
    <input type="number" id="exampleForm2" class="form-control">
    <br>
    <h4>AGI approximatly</h4>
  </div>

</div>
<!-- Card -->
        </div>
        <div class="col">
          <!-- Card -->
<div class="card">

  <!-- Card image -->


  <!-- Card content -->
  <div class="card-body">

    <!-- Title -->
    <h4 class="card-title"><a>STEP 4</a></h4>
    <!-- Text -->
    <p class="card-text">Confirm your purchase</p>
    <!-- Button -->
    <a href="#" class="btn btn-primary btn-rounded btn-block" id="approve">Approve</a>
    <br>
    <br>
    <a href="#" class="btn btn-success btn-rounded btn-block" id="mint">Mint</a>
  </div>

</div>
<!-- Card -->
        </div>
      </div>
    </div>
    <br>
    <div class="card" style="background-color:black;opacity: 0.6;">
         <div class="card-body">
           <h5 class="card-title"></h5>
           <p class="card-text" style="color:white;">Note: 10% entry fees, 10% exit fees, 2% referral fees, 2% dev fees.The sell fee will
             only be distributed if you actually sell your tokens. The number of tokens you will receive for your AGI does not include the fees, it's an estimate.</p>

         </div>
       </div><!-- end of card -->
       <br>
<div class="container">
  <div class="row">
    <div class="col" >

<!-- Card -->
<div class="card card-image" style="background-color:grey;">

  <!-- Content -->
  <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
    <div>
      <h5 class="pink-text"><i class="fas fa-chart-pie"></i> Your Holdings</h5>
      <h3 class="card-title pt-2"><strong><h2 class="card-text"><img src="images/agi.png" class="rounded" style="width:15%">1.1 AGI</h2></strong></h3>
      <h3 class="card-title pt-2"><strong>AGI VaLue</strong></h3>

<p>AGI</p>
<div class="row" >
<div class="col-sm-6" >AGI</div>
<div class="col-sm-6" >$ 0.13</div>
</div>

    </div>
  </div>

</div>
<!-- Card -->

    </div>
    <div class="col">.col</div>
    <div class="col">
      <!-- Card -->
<div class="card card-image" style="background-color:grey;">

  <!-- Content -->
  <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
    <div>
      <h5 class="pink-text"><i class="fas fa-chart-pie"></i>Your Rewards</h5>
      <h3 class="card-title pt-2"><strong>Earned AGI</strong></h3>
      <div class="row">
      <div class="col-sm-6">
        <h3>Option 1</h3>
        <p>SNET</p>
        <button type="button" class="btn btn-primary" id="reinvest">REINVEST</button>
      </div>
      <div class="col-sm-6">
        <h3>Option 2</h3>
        <p>AGI</p>
        <button type="button" class="btn btn-primary" id="withdraw">WITHDRAW</button>
      </div>
    </div>

    </div>
  </div>

</div>
<!-- Card -->
    </div>
  </div>

</div>
<br>
<div class="card" style="background-color:black;opacity: 0.8;text-align:center;">
     <div class="card-body">
       <h5 class="card-title">Masternode</h5>
       <p class="card-text" style="color:white;" id="masternode">http://snetsaving.com</p>

     </div>
   </div><!-- end of card -->
<br>
   <div class="container" style="background-color:black;opacity:0.8;">
     <h1 style="text-align:center; color:white;">Exchange</h1>
       <div class="row">
         <div class="col">
           <!-- Card -->
   <div class="card">

     <!-- Card image -->


     <!-- Card content -->
     <div class="card-body">

       <!-- Title -->
       <h4 class="card-title"><a>STEP 1</a></h4>
       <!-- Text -->
       <p class="card-text">Exchange rate per SNET</p>
       <!-- Button -->
       <h2 class="card-text"><img src="images/logo.png" class="rounded" style="width:15%">1.1 AGI</h2>
       <br>
       <h3>0.00000 USD</h3>
       <br>

     </div>

   </div>
   <!-- Card -->
         </div>
         <div class="col">
           <!-- Card -->
 <div class="card">

   <!-- Card image -->


   <!-- Card content -->
   <div class="card-body">

     <!-- Title -->
     <h4 class="card-title"><a>STEP 2</a></h4>
     <!-- Text -->
     <p class="card-text">Amount to exchange</p>
     <!-- Button -->
     <input type="number" id="exampleForm2" class="form-control">
     <br>
     <h4>SNET available</h4>
     <br>
   </div>

 </div>
 <!-- Card -->
         </div>
         <div class="col">
           <!-- Card -->
 <div class="card">

   <!-- Card image -->


   <!-- Card content -->
   <div class="card-body">

     <!-- Title -->
     <h4 class="card-title"><a>STEP 3</a></h4>
     <!-- Text -->
     <p class="card-text">You receive</p>
     <!-- Button -->
     <input type="number" id="exampleForm2" class="form-control">
     <br>
     <h4>AGI approximatly</h4>
     <br>
   </div>

 </div>
 <!-- Card -->
         </div>
         <div class="col">
           <!-- Card -->
 <div class="card">

   <!-- Card image -->


   <!-- Card content -->
   <div class="card-body">

     <!-- Title -->
     <h4 class="card-title"><a>STEP 4</a></h4>
     <!-- Text -->
     <p class="card-text">Confirm your exchange</p>
     <!-- Button -->
     <br>
     <br>
     <a href="#" class="btn btn-primary btn-rounded btn-block">Exchange</a>
     <br>
     <br>
   </div>

 </div>
 <!-- Card -->
         </div>
       </div>
     </div>
     <br>
     <!-- Footer -->
<footer class="page-footer font-small blue">

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">© 2020 Copyright:
    <a href="https://mdbootstrap.com/education/bootstrap/"> SNETSAVING.com</a>
  </div>
  <!-- Copyright -->

</footer>
<!-- Footer -->

  </body>
</html>

I'm using bootstrap for the layout

Solution

  • This is because you're missing the meta tag viewport within your document. I highly recommend you check out the Bootstrap Starter Template, if you haven't already. Adding the following just below <meta charset="utf-8"> should do the trick:

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    For more information on the viewport tag you can, for example, check out the article on Using the viewport meta tag to control layout on mobile browsers from MDN web docs. Basically, it ensures that the actual device width will be used for any media queries that e.g. Bootstrap uses for laying out columns. Otherwise, a larger virtual width will be used to ensure compatibility with older sites.