@rayaatta
Posted
Hello 👋chirag-bishnoi, congratulations on completing another challenge 🎉.
I have some tips that might also answer your question.
1
Change height: 100svh; on the body to
min-height:100svh;
This makes sure that content does not overflow on short devices or mobile devices in landscape mode
2 Be careful of setting fixed heights.when you give your card a fixed height, like it or not their is a possibility of text overflowing the parent or else creating an unnecessary empty space. You can just leave the contents to determine the height of the parent using their margins and stuff.the parent will adjust automatically to make them fit in.
3
You used
width: 350px;
On the .card
This is okay but in case a screen is less than 350px wide then the card overflows the view port.
You can make it more responsive by using
max-width:min(90%,350px)
This means it is 350px but on smaller screens it only covers 90% of the width.
I hope this helps 🙃
Otherwise your solution is neat👍 Happy coding ✌️
Marked as helpful
