After crafting some Cards utilizing bootstrap, html and css, I encountered an issue when resizing the screen as the cards don't adjust accordingly.
Prior to resizing, this is how they appear:
https://i.sstatic.net/oOf26.png
Upon inspecting and switching to iPad view, this is what it looks like:
https://i.sstatic.net/Of5EB.png
Despite attempting a media query in my css file to address this problem, I have had no success. Could someone please advise me on what mistake I might be making? EDIT: My ideal scenario would involve having one card stacked on top of another when adjusting the screen size, while also maintaining spacing between them.
<div class="col-md-4">
<div class="ScoreCard">
<div>
<h3 style="background-color:@item.TitleColor"> @item.ReportName - @item.TitleColor </h3>
</div>
<div class="col-lg-4">
<div style="font-weight:bold; margin-top:35px;">
<h1>GrossAmountDue</h1>
</div>
</div>
<div class="col-lg-2" style="margin-top:35px;">
if (Flag == 1)
{
<i class="fas fa-circle" style="font-size:30px; color:red; margin-left:15px;"></i>
}
</div>
<div class="col-lg-6">
<div>
<p style="font-size:20px; margin-left: 25px;">Audited </p>
<p style="font-size:20px; margin-left: 25px;">Packages: Will go here</p>
<p style="font-size:20px; margin-left: 25px;">Transactions will go here</p>
<p style="font-size:20px;"Icon will go here</p>
</div>
</div>
<div class="row">
<div class="col-lg-12" style="margin-top: 5px;">
<p style="margin-left:17px;">Text Here</p>
</div>
</div>
</div>
</div>
//CSS
<style>
.ScoreCard {
background-color: orange;
width: 500px;
min-height: 200px;
border: 15px black;
}
@@media screen and (max-width: 100px){
.col{
width: 50%;
}
}
</style>