Is there a way to make this responsive without using media queries? I'm currently working with Bootstrap cards, but when I resize the page, they overlap. I think my CSS might be causing the issue. Here is the code for both the CSS and the body. Thank you!
<style>
/* Common Styles */
* {
margin: 0;
padding: 0;
text-decoration: none;
box-sizing: border-box;
outline: none;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url(assets/image_bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
#image {
padding: 17rem 15rem 0 25rem;
}
.card {
width:16rem;
}
img {
width:100%;
height: 100%;
}
</style>
<div id="image">
<div class="row">
<div class="image-column col-lg-3 col-md-6 col-sm-6">
<div class="card h-100">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-body p-0 w-100">
<img src="assets\image_1.jpg" alt="">
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6 col-sm-6">
<div class="card h-100 p-0">
<div class="card-header">
<h3>GARY GARI</h3>
</div>
<div class="card-body p-0 w-100">
<img src="assets\image_1.jpg" alt="">
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-0">
<div class="card-header">
<h3>IL PIATTO</h3>
</div>
<div class="card h-100 p-0">
<img src="assets\image_1.jpg" alt="">
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-0">
<div class="card-header">
<h3>PIERRE PLATTERS</h3>
</div>
<div class="card h-100 p-0">
<img src="assets\image_1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>