Div Card overlap each other when I reduce the screen size on certain degree. However, once I reduce it even more, it works as intended. This is how it appears when I reduce it to the point where bootstrap can work on col-md
This presents a problem.
https://i.sstatic.net/nZkJY.jpg
This is the normal appearance:
https://i.sstatic.net/KYzNZ.jpg
.cards {
margin-top: 100px;
}
.cards h1 {
text-align: center;
}
/* CSS rules for figures, links, and captions go here */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cards">
<h1>What We Offer</h1>
<div class="row">
<div class="col-lg-3 col-md-6">
<a class="" href="#">
<figure style='background-image: url("offers/conference.jpg")'>
<figcaption>
<h4> <span>Conference halls</span></h4>
<p></p>
</figcaption>
</figure>
</a>
</div>
<div class="col-lg-3 col-md-6">
<a class="" href="#">
<figure style='background-image: url("offers/restaurant.jpg")'>
<figcaption>
<h4> <span>Restaurant & Bar</span></h4>
<p></p>
</figcaption>
</figure>
</a>
</div>
<div class="col-lg-3 col-md-6">
<a class="" href="#">
<figure style='background-image: url(offers/entertainment.jpg)'>
<figcaption>
<h4> <span>Entertainment room</span></h4>
<p></p>
</figcaption>
</figure>
</a>
</div>
<div class="col-lg-3 col-md-6">
<a class="" href="#">
<figure style='background-image: url("offers/spa.jpg")'>
<figcaption>
<h4> <span>Spa & Wellness</span></h4>
<p></p>
</figcaption>
</figure>
</a>
</div>
</div>
</div>