Design comparison
Solution retrospective
Hey y'all!
I designed this mobile first, which was a first for me.
Struggled with:
♦Vertical spacing of the info text (what would call the product-information part? copy?)
♦Making it responsive: For some reason I needed to increase ".info"'s width instead of "main"'s, which I don't understand why 😣
♦The little shopping cart icon: I ended up just using an <img> tag, which I know isn't right. I thought there should be an <icon> or <i> tag, but I couldn't figure out how to source it locally using those tags.
Learned a lot about:
♦Linking fonts with HTML instead of CSS. I always just used "@import" before.
♦Starting mobile first.
♦Grouping elements together in proper containers
Wondering about: Should I have used less lines? Is there a more efficient way to space things out properly? Would you say I'm close to the design?
Thank you for reading and looking at my submission! 😀✌
Community feedback
- @hitmorecodePosted over 1 year ago
Congratulations well done. I took a look at your page and the card is not in the center of the page. In mobile the buttons looks good, but when changing to desktop it's all compressed.
# add this reset in your css * { margin: 0; padding: 0; box-sizing: border-box; } # you can remove margin: 0, padding: 0 and border: 0. These are in the reset. body { min-height: 100vh; display: flex; # these three lines will place the card in the center of the page justify-content: center; align-items: center; font-size: 100%; background: hsl(30, 38%, 92%); }
One tip I wouldn't use main as the container for the card. You can wrap everything inside another div
For a smoother hover animation you can add
transition: background-color 150ms ease-in-out;
to the button.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