I am facing an issue with centering images on my cards. The containers look fine on PC (centered) when smaller, but on responsive mode they revert back to the larger size and are left aligned. I want the images in the card containers to be centered regardless of the container size.
I have attempted changing the display property from inline-block to block and using classes like "text center" and .mx-auto, but nothing seems to be effective. You can view the whole page here.
.row .heading .heading-icon {
display: block;
}
.committee-card .card:hover {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
border: 0;
}
.committee-card .card {
float: left;
width: 100%;
background: #fff;
padding: 30px 20px;
text-align: center;
border: 2px solid #d5d5d5;
margin: 0 0 28px;
}
.committee-card .card figure {
width: 148px;
height: 148px;
border-radius: 100%;
display: inline-block;
margin-bottom: 15px;
}
.committee-card .card img {
width: 148px;
height: 148px;
border-radius: 100%;
display: inline-block;
}<section class="committee-card padding-lg">
<div class="containera">
<ul class="row">
<li class="col-12 col-md-6 col-lg-3">
<div class="card equal-height" style="height: 349px;">
<figure>
<img src="committee/001.jpg" class="img-responsive" alt="" />
</figure>
<h1>Richard Garwell</h1>
<br />
<p>Trustee and Track Committee Member</p>
</div>
</li>
<li class="col-12 col-md-6 col-lg-3">
<div class="card equal-height" style="height: 349px;">
<figure>
<img src="committee/002.jpg" class="img-responsive" alt="" />
</figure>
<h1>Glen Brown</h1>
<br />
<p>Trustee and Chairman</p>
</div>
</li>
<li class="col-12 col-md-6 col-lg-3">
<div class="card equal-height" style="height: 349px;">
<figure>
<img src="committee/003.jpg" class="img-responsive" alt="" />
</figure>
</div>
</li>
</ul>
</div>
</section>