Submitted 10 months ago
Responsive Product Preview Card Component Using HTML and CSS
@thujuli
Design comparison
SolutionDesign
Solution retrospective
For this project, I'm trying to create a component using Vanilla CSS. You can see my code and give me feedback : )
Community feedback
- @kimodev1990Posted 10 months ago
Really great work in completing the challenge, Just a few feedback :
- Wrap the page's whole content in the <main> tag.
- For your div class .card-img & div class .card-body , Intstead of assigning them
width: 300px ;
, It's better to assign percentage values such aswidth: 50% ;
, So you could have a responsive design in relative with the size of div class .card . - Use font-size in rem or em units rather than pixels for better responsiveness .
- I'd like to suggest to check up clamp ( ) method. You could use clamp ( ) method in your coding for font-size, width, margins, padding, etc., So the designed sizes will change according to the viewport dimensions having a responsive design and will be suitable for any device layout.
Hope you find this Helpful.
Other than that, Really Nice work & keep Going on .
Marked as helpful0
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