Product preview card component solution - Second challenge completed!
Design comparison
Solution retrospective
Really proud of this one! I learned that sometimes less is more, I tried to add complexity to the code as needed, not the other way around.
Any feedback or suggestion of how to improve the code is more than welcome!
Thanks!
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi luisoliverosrdn, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- To align some content in the center of the screen, always prefer to use
display: flex;
it will make the layout more responsive!
Example:
body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
The rest is great!
I hope it helps... 👍
Marked as helpful1@luisoliverosrdnPosted about 2 years ago@AdrianoEscarabote Thank you very much!! That was driving me crazy, I couldn't figure it out.
Very helpful, Thanks! :)
1 - To align some content in the center of the screen, always prefer to use
- @Alucard2169Posted about 2 years ago
hi @luisoliverosrdn,
You did a awesome job.
- here are some points to help you:-
-- use
display: flex
and a flex-direction of column with height 100vh on body, to center the card perfectly.-- you don't have to use
alt
attribute on anchor tag.happy coding!
Marked as helpful0@luisoliverosrdnPosted about 2 years ago@Alucard2169 Thank you! Is the solution I was looking for.
Thanks!
0
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