@ApplePieGiraffe
Posted
Hi, bimalmagar! 👋
Nice work on this challenge! 🙌 The card component is looking good and responds well! 👍
The only thing I suggest is to give the card component a fixed height (or better yet, allow its height to be determined by its content). This will ensure that the height of the card component is more consistent across screen sizes and that it's never too tall or too short. Adding a max-width to the card component might be a good idea, as well (so that it doesn't become too wide on extra-large screens). 😉
Keep coding (and happy coding, too)! 😁
@bimalmagar10
Posted
@ApplePieGiraffe Thank you!😌 for checking out my solution and yeah! your suggestion about adding a max-width to the card component is the good idea.I will implement that in my code.😊
But,the next thing your suggestion about adding a fixed height (you mean not using relative units......right???) to the component might be a bit weird,isn't it?As the screen gets smaller the card component's content will overflow the component's fixed height and the design looks quite nasty, eh?🧐
Lastly, the better way will be allowing its height to be determined by its content as you suggested.Can you give me some hints about how i can implement that?? Is it by adding a fixed height to its child elements or what???🤨
@ApplePieGiraffe
Posted
@bimalmagar10
Giving an element a fixed height might work well in some instances, but I'd agree that in most cases, allowing the height of an element to determined by its content would probably be the best thing to do. I think by default, most elements are usually only has high as the content inside them (unless maybe they are children of a flex or grid container or something). I played around with your code in the dev tools, and in this case, adding a max-width to the card, removing the height of the card that is set in relative units, and removing height: 100% from the two child elements inside the card seems to help. 🙂
Here's a good solution for this challenge from Anna that you might like to take a look at. The dimensions of the card scale well with the size of the screen.
The animations you added to your solution are pretty cool, BTW! 👍
@bimalmagar10
Posted
@ApplePieGiraffe Hey, i had some gap in between and I couldn't respond to your comment though.
Yeah! adding a max-width and removing height:100% is necessary but not sufficient.I had to do some modifications too make it more polished.
I really appreciate your response in this 🤘.
