<!-- New Blog Post -->
<div class="card mb-4">
<img class="card-img-top" src="https://ichef.bbci.co.uk/news/660/cpsprodpb/948D/production/_109592083_mediaitem109591445.jpg" alt="Card image cap">
<div class="card-body">
<h2 class="card-title">Funding For Bulbul</h2>
<p class="card-text">Authorities in Bangladesh have issued evacuation orders for around 100,000 people from coastal areas as Cyclone Bulbul approaches the country.
The cyclone is expected to hit on Saturday evening with surges as high as 7ft (two meters).</p>
<div class="myrow">
<div class="col-1my">
<a href="#" class="btn btn-primary">Read More →</a>
</div>
<!--Progress Bar-->
<div class="col-2my">
<div class="container">
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer text-muted">
Posted on November 9, 2019 by
<a href="https://www.bbc.com/bengali">BBC Bangladesh</a>
</div>
</div>
The Related CSS Rules
.myrow {
display: flex;
width: 100%;
}
.col-1my {
width: 40% !important;
}
.col-2my {
width: 60% !important;
}
* {
box-sizing: border-box;
}
Output : https://i.sstatic.net/ASN45.jpg
The buttons need to be more visible and fit the text properly. How can I adjust this?
**Update 1 ** :
Updated CSS :
.myrow {
display :flex;
width : 100%;
}
.col-1my {
width : 40% !important;
}
.col-2my {
width : 60% !important;
}
* {
box-sizing: border-box;
}
The issue was resolved by renaming the columns and adjusting the CSS properties as per the comments. This change helped in fixing the visibility and size of the buttons as intended.