I am currently working with cards within a grid system, but I am encountering an issue with resizing when the column size is smaller than medium in the mobile view inside the inspect section.
The width does not expand to 100%, regardless of how much I try to resize the view. Here is a screenshot showing the view inside the inspect mode not covering the full page width
However, under normal circumstances it resizes correctly in the regular Chrome tab. In this screenshot, the card covers the entire 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>