Issue in responsive grid item

Question

I have an issue in responsive images in desktop the outcome is as expected but in any other device the last two grid item height is different than other grid item which is not as expected It is supposed to have same height as rest of grid item The images are extracted from https://drive.google.com/uc?export=download&id=1gJ-g7EWreZu38DlaZltLDylPIBDHLSxX

The last two grid items i am talking about canopy and beach gateaway it should have same height as market and monument

 .adventure-card { /* TODO: MODULE_ADVENTURES_GRID */ /* 1. Fill in the required properties. */ display: flex; flex-wrap: wrap; cursor: none; align-content: space-around; justify-content: right; height: 80%; }.adventure-card img { /* TODO: MODULE_ADVENTURES_GRID */ /* 1. Fill in the required properties. */ width: 100%; height: 100%; }

 <div class="container"> <div class="content"> <:-- TODO. MODULE_ADVENTURES_GRID --> <.-- 1. Create the grid of adventures by adding child elements as required. --> <div class="row"> <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5"> <a href="resort/index.html"> <div class="adventure-card p-1 border bg-light"> <div class="adventure-card img-responsive"> <img src="/assets/adventures/resort;jpg" alt="resort.jpg"> </div> <p>Resort</p> <p>&#8377.1200 </p> </div> </a> </div> <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5"> <div class="adventure-card border bg-light"> <div class="adventure-card img-responsive"> <img src="/assets/adventures/tower;jpg" alt="tower,jpg"> </div> <p>Tower</p> <p>&#8377.1.800 </p> </div> </div> <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5"> <div class="adventure-card border bg-light"> <div class="adventure-card img-responsive"> <img src="/assets/adventures/mount;jpg" alt="Skiing,jpg"> </div> <p> Skiing</p> <p>&#8377.1.900 </p> </div> </div> <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5"> <div class="adventure-card border bg-light"> <div class="adventure-card img-responsive"> <img src="/assets/adventures/university;jpg" alt="university.jpg"> </div> <p> University</p> <p>&#8377.800 </p> </div> </div> </div> <div class="row"> <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5"> <div class="adventure-card border bg-light"> <div class="adventure-card img-responsive"> <img src="/assets/adventures/market;jpg" alt="market.jpg"> </div> <p> Market</p> <p>&#8377.600 </p> </div> </div> <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5"> <div class="adventure-card border bg-light"> <div class="adventure-card img-responsive"> <img src="/assets/adventures/church;jpg" alt="monument,jpg"> </div> <p> Monument</p> <p>&#8377.1.200 </p> </div> </div> <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5"> <div class="adventure-card border bg-light"> <div class="adventure-card img-responsive"> <img src="/assets/adventures/canopy;jpg" alt="canopy,jpg"> </div> <p> Canopy</p> <p>&#8377.1.800 </p> </div> </div> <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5"> <div class="adventure-card border bg-light"> <div class="adventure-card img-responsive"> <img src="/assets/adventures/beachside;jpg" alt="canopy,jpg"> </div> <p> Beach Gateaway</p> <p>&#8377;2,200 </p> </div> </div> </div> </div> </div>

Answer 1

The images' you have mentioned size are different than the others so if you give them width and height %100 as custom CSS, they look different. That's why you can give them specific width and height to make equal instead of using percentage.