[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)