0

The space between my images on mobile is way too large: mobile version It looks okay on Dev Tools: dev tools version

HTML:

<div class="container-fluid">
    <!-- <br> -->
    <div class="row">
      <img class="col-sm-6 col-md-4" src="digart/fire_cryinggirl.png" alt="girl crying underneath fire">
      <img class="col-sm-6 col-md-4" src="digart/ko_munyeong.png" alt="chibi-style ko munyeong">
      <!-- mindprison hidden on small-->
      <img class="col-sm-6 col-md-4 d-sm-none d-md-block" src="digart/mind_prison.png" alt="brain in a prison">
    </div>
 </div>

CSS:

img {
    object-fit: contain;
    margin-bottom: 5vh;
}

I've already tried using a media query with max-width and decreasing the margin-bottom, but there is no change to the mobile version.

meghna i
  • 1

2 Answers2

0

Although it all looks okay when I tried on my side with your code, it seems weird that why you should use vh inside your css code. Please try again after change vh to px or %.

img {
    object-fit: contain;
    margin-bottom: 5px;
}

If you have reason that should use 5vh then you should explain more about this in your question. Btw did you try on your mobile device?

development-ninja
  • 524
  • 2
  • 7
  • Hi! Using px didn't change anything. I did try on my mobile device! The problem was the "object-fit:contain", but I figured out that I just needed to do height: 70% and it was fixed! Thank you for your help! :) – meghna i Oct 19 '20 at 07:50
0

I figured it out! The object-fit:contain makes the image proportions correct, but each image still took up the same amount of height as it would if I had done object-fit:none. To fix it I just needed to add height: 70%.

meghna i
  • 1