Design comparison
SolutionDesign
Solution retrospective
What challenges did you encounter, and how did you overcome them?
I didn't know how to choose an image based on media size. Now I now that picture
tag can handle it.
- I am not sure whether I configured element resizing based on media size properly
- Cart icon doesn't look aligned vertically despite all my attempts
Community feedback
- @VickyAzolaPosted 7 months ago
Hi there! 👋 Awesome job completing this challenge.
The media query seems fine to me. The only thing that seems different compared to the design is the price on mobile; there, the
flex-direction: column;
is not necessary:@media screen and (max-width: 768px) { ..... .price-block { gap: 0.5rem; margin: 1rem 0; ---> added to separate from the text and button } }
And for the button, you can achieve the alignment by giving it a display of flex and deleting the class on the image. Here is an example:
button { ---- added ----- display: flex; align-items: center; justify-content: center; column-gap: .8rem; ----- width: 100%; padding: 1rem; font: inherit; font-weight: 600; color: var(--white); background-color: var(--dark-cyan); cursor: pointer; border: none; border-radius: 0.5rem; } --- Delete this one ---- .icon-cart { width: 0.75rem; vertical-align: middle; /* Aligns strangely, not in the middle */ margin-right: 0.5rem; }
Hope this helps!
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