Image dimensions not matching p
I randomly downloaded these images from the web and i made 3 cards in a grid. When i rendered it the images came out so misshapen and i dont understand why, and this always happens. Here is the html and css, i have also started using bootstrap so idk if thats part of the problem.
also for some reason my media queries for responsiveness are not working as expected, any advice?
7 Replies
first of all. change
grid-template-columns: auto auto auto;
to grid-template-columns: repeat(3, 1fr);
Set the images to
thank you so much, let me give it a go🤝
you're a legend bro, it worked✨ if you dont mind me asking, im still a beginner rn, i only stated my from end journey like 2 months or so ago...how did you know that was the solution to the problem? In general how do you know how to solve a problem that you encounter?
.
I have just used CSS for a very long time. I write CSS for several hours every day and i've done this for the last 15 years or so.
But i just know how grid works, the 1fr is kinda like
flex:1;
in flexbox. Each grid item will take 1fr size, so that means 1 fraction. So they all take the same width. And i have just learned about the other properties from reading on MDN and from forums and other stuff. I have also learned a couple of things from Kevins videos which i highly recommend you to watch more of if you have just got started with this.
But i guess the reason i know this particular problem is because i have done card layouts myself in the past. And often with images of different sizes. So i have had the same problem myself 🙂i understand, thanks again for you assistance, it has been highly appreciated💯
No problem 🙂 Btw, i strongly recommend you to learn a lot about devtools. SUre ion this case maybe it would not had helped so much because you probably didnt know about properties such as the aspect-ratio property or the object-fit property and stuff. But the devtools is how you solve your problems when you run in to problems. So you can see in devtools what the problem is. Then you just need to know how to actually solve it. But you will learn this with time 🙂