I need to make a responsive design for these 2 sections, both section is quite in the same line display. Here's both of the Desktop & tablet/mobile Resolution:
I think it's because I'm using d-flex, but I still can't manage to fix it. I'm doing the d-flex to make the icon and text in these 8 cards in the same line but also centered vertically and horizontally. Do I need to delete the d-flex? if that's needed, what's the other trick to make the items inside card centered-aligned (image not on top of the text but in the left of the text)? Down below is my source-code:
/* Third Section */
.third .img-wrapper {
height: 300px;
background-image: url("https://svgshare.com/i/gky.svg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.third i {
color: #259332;
}
.third .card-body {
color: rgb(27, 27, 27);
}
/* Fourth Section */
.fourth .card {
border-radius: 15px;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Third Section - Other Inquiries -->
<section class="third" id="third">
<div class="container">
<div class="row text-center mb-3">
<div class="col">
<h4><b>Pilih Topik Inquiry</b></h4>
</div>
</div>
</div>
<div class="img-wrapper">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div class="card shadow-sm h-100">
<a href="">
<div class="card-body d-flex justify-content-evenly">
<i class="fa-solid fa-building-circle-check pe-2 flex-wrap my-auto"></i>
<span class="card-text flex-wrap">Validasi Perusahaan</span>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div class="card shadow-sm h-100">
<a href="">
<div class="card-body d-flex justify-content-evenly">
<i class="fa-solid fa-building-circle-check pe-2 flex-wrap my-auto"></i>
<span class="card-text flex-wrap">Informasi Pasar & Regulasi Standar</span>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div class="card shadow-sm h-100">
<a href="">
<div class="card-body d-flex justify-content-evenly">
<i class="fa-solid fa-building-circle-check pe-2 flex-wrap my-auto"></i>
<span class="card-text flex-wrap">Permintaan Hubungan Dagang</span>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div class="card shadow-sm h-100">
<a href="">
<div class="card-body d-flex justify-content-evenly">
<i class="fa-solid fa-building-circle-check pe-2 flex-wrap my-auto"></i>
<span class="card-text flex-wrap">Permintaan Data Exportir</span>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div class="card shadow-sm h-100">
<a href="">
<div class="card-body d-flex justify-content-evenly">
<i class="fa-solid fa-building-circle-check pe-2 flex-wrap my-auto"></i>
<span class="card-text flex-wrap">Permintaan Data Statistik</span>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div class="card shadow-sm h-100">
<a href="">
<div class="card-body d-flex justify-content-evenly">
<i class="fa-solid fa-building-circle-check pe-2 flex-wrap my-auto"></i>
<span class="card-text flex-wrap">Pendampingan Business Matching</span>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div class="card shadow-sm h-100">
<a href="">
<div class="card-body d-flex justify-content-evenly">
<i class="fa-solid fa-building-circle-check pe-2 flex-wrap my-auto"></i>
<span class="card-text flex-wrap">Bahan Persentasi, Speech, & Wawancara Wartawan</span>
</div>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div class="card shadow-sm h-100">
<a href="">
<div class="card-body d-flex justify-content-evenly">
<i class="fa-solid fa-building-circle-check pe-2 flex-wrap my-auto"></i>
<span class="card-text flex-wrap">Lainnya</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End of Third Section -->
<!-- Fourth Section - FAQ -->
<section class="fourth">
<div class="container">
<div class="row text-center mt-3 mb-3">
<div class="col">
<h4><b>Pertanyaan yang Sering Diajukan</b></h4>
</div>
</div>
<div class="row">
<div class="col mx-5 px-5 mb-5">
<div class="card shadow-sm">
<div class="card-body">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Lorem Ipsum Dollor Sit Amet
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus distinctio quaerat iste earum eaque aut animi minima vero inventore eveniet? Illum, quaerat quibusdam sit aperiam facere id iusto laboriosam consequatur maiores
ullam, officiis voluptate, sapiente earum incidunt doloremque numquam expedita!</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Lorem Ipsum Dollor Sit Amet
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint possimus amet mollitia vitae molestiae id recusandae sequi cupiditate modi inventore distinctio, earum nihil, veritatis soluta quod officiis, ratione incidunt nobis. Necessitatibus,
accusantium! Sunt, deleniti quibusdam!</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Lorem Ipsum Dollor Sit Amet
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor possimus doloribus eligendi et sequi illo itaque modi esse incidunt sapiente laboriosam alias adipisci assumenda necessitatibus nesciunt sit vero atque aspernatur voluptatibus
qui blanditiis, beatae ullam voluptatum! Blanditiis repellendus possimus illum hic magnam quae numquam voluptatem.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End of Fourth Section -->
You have a fixed height on your img-wrapper element. Remove it. That's rarely a good idea in a fluid layout unless you set overflow to allow scrolling.