CODEWITHSUNDEEP
htmlcssgoogle-chromebootstrap-5col
itskushal
itskushal

Reputation: 1

Bootstrap 5 col is not responsive after medium size in chrome inspect section but seems to working fine elsewhere

I am working with cards inside grid system but there seems to be problem with resizing when the col size is smaller than medium in the mobile view inside the inspect section.

The width is not getting to 100% no matter how much I resize the view this shows the view inside the inspect mode not covering the full page width

Whereas normally its resizing correctly in the normal chrome tab here its covering the complete width of the page

<div class="row">
        <div class=" col-12 col-sm-12 col-md-6 col-lg-4  ">
          <div class="card">
            <div class="card-header">
              <h3>Chihuahua</h3>
            </div>
            <div class="card-body">
              <h2>Free</h2>
              <p>5 Matches Per Day</p>
              <p>10 Messages Per Day</p>
              <p>Unlimited App Usage</p>
              <button type="button">Sign Up</button>
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-12 col-md-6  col-lg-4 ">
          <div class="card">
            <div class="card-header">
              <h3>Labrador</h3>
            </div>
            <div class="card-body">
              <h2>$49 / mo</h2>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button">Sign Up</button>
            </div>
          </div>
        </div>

    <div class=" col-12 col-md-12 col-lg-4">
      <div class="card">
        <div class="card-header">
          <h3>Mastiff</h3>
        </div>
        <div class="card-body">
          <h2>$99 / mo</h2>
          <p>Pirority Listing</p>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button type="button">Sign Up</button>
        </div>
      </div>
    </div>
  </div>

Upvotes: 0

Views: 184

Answers (1)

Vedant Tathe
Vedant Tathe

Reputation: 1

Yes, also I was facing this problem. My website is responsive in mobile, but in the chromes inspect mode it is not responsive then I added this following lines in my html code and this problem is solved.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Add above lines in your head tag of html page as follows:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JSP Page</title>
    </head>
    <body>
    </body>
</html>

Hope this will help you..!

Upvotes: 0

Related Questions