@SatellitePeace
Posted
Hello @NikhilKumarSingh4002 I commend you for trying to put your knowledge to the test for it is the best way to learn
-
as to why your card is not responsive I think there are a couple of reasons,
-
the margin and paddings are unnecessary
-
the card already has a fixed width of 18rem which can affect responsiveness on different screen sizes
-
Checkout the code below
<main class="card mb-3" style="max-width: 540px; min-width:340px;">
<div class="row g-0">
<div class="col-md-6">
<img "images/image-product-desktop.jpg" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-6">
<div class="card-body">
<p class="card-text"><small class="text-muted">PERFUME</small></p>
<h1 class="card-title">Gabrielle<br /> Essence Eau<br /> De Parfum</h1>
<p class="card-text">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
<h2 class="price" >$149.99</h2>
<p class="" >169.99</p>
<div class="d-grid gap-2">
<button class="btn btn-success" type="button"><img src="images/icon-cart.svg" alt="cart-icon"> Add to Cart</button>
</div>
</div>
</div>
</div>
</main>
- i changed col-lg-6 to col-md-6
- you will also notice that i removed the fixed width of 18rem and added a max-width and min-width
- i added a max-width and a width
- i removed the padding and margin
- i changed the main container from a div tag to the main tag
NOTE you will still have to write a few custom CSS
-Study the code you and use it to make the necessary corrections in your own code
-
You can also put it in your code editor and play around with it
-
Finally for some unsolicited advice
-
I am no expert but many experts will tell you to learn CSS very well before going into CSS frameworks if you have not learned CSS properly kindly accept the advice of these experts
I HOPE THIS HELPS