Design comparison
Community feedback
- @rayaattaPosted 10 months ago
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 tomin-height:100svh;
This makes sure that content does not overflow on short devices or mobile devices in landscape mode2 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 usingmax-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 helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord