[FIXED] The image is taking the original dimentions of it on the phone after deployment

Issue

So i finished coding my responsive webiste and deployed it to the web, but im facing a wierd problem that i really didnt find an answer for. I’m using react js and I uploaded some images to my webiste using tag, and added some css grid to it. But the problem that im facing is that when i open the website from my phone the image is taking its original height dimention instead of the dimentions that i added in the css file. Whats weird about it is that the images are working just fine on the computer screen, even when i inspect the website and make the screen smaller its working just fine. Moreover, I tried the phone size feature on google chrome by inspecting the website but it was working just fine as well. Its just not displaying the right dimentions of the image and instead it follows the image’s original dimention when i uploaded the image to my files.

Note: the width is right but the hieght isn’t. I hosted my website on Vercel

Here is how the images looked like and how they are supposed to be.

enter image description here
enter image description here

My Js file:

const Memory = () => {
  return (
    <div id="finally">
      <div id="sa">
        <div class="card" id="MyCards">
          <div class="card-body" id="ToTheLeft">
            <h5 class="card-title">Ottawa, Canada</h5>
            <p class="card-text">September 2nd, 2021</p>
          </div>
          <Image className="M1" src={Sep2} alt="Memory1"></Image>
        </div>
      </div>
    </div>

Css file:

#finally {
  text-align: center;
}
#MyCards {
  position: center;
  margin: 16px;
  text-align: left;
}

#ToTheLeft {
  height: 65px;
  text-align: left;
}
#sa {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* grid-template-columns: repeat(2, 350px); */
  grid-row: auto;
  grid-column-gap: 60px;
  grid-row-gap: 50px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 960px) {
  #MyCards {
    flex-basis: 50%;
  }
}
@media (max-width: 960px) {
  #sa {
    display: grid;
    grid-row: auto;
    flex-basis: 50%;
    grid-row-gap: 50px;
    grid-template-columns: 1fr;
  }
}

Please let me know if you need any more info.

I really cant fidn anything online so would appreciate the help

Thank you!

Solution

I don’t know why the issue didn’t pop up when you emulated a phone screen on your computer, but thanks to this, I was able to debug it from my phone.

The quick fix is to add width: 100% to .M1, and tada height will behave.

I don’t have a complete explanation, but it starts with this, you have not specified height or width anywhere. Specifically width. It would appear that you have width set thanks to

.card {
    display: flex;
    min-width: 0;
}

If you disable either rule, the image’s width will balloon to its intrinsic size. So it looks like the image has a set width when it’s given by the flex container. And no actual width means the image will use its intrinsic. By setting width: 100%, the height will be resized and preserve the aspect ratio.

You might find a little more value from Setting Height And Width On Images Is Important Again

Answered By – EasilyBaffled

Answer Checked By – Jay B. (FixeMe Admin)