Product preview card component using CSS flexbox & mobile-first
Design comparison
Solution retrospective
- Why Frontend Mentor give desktop width - is this for breakpoint, Because i didn’t use it any where.
- why i am having a space between image section and text section. Because of this i have to use position relative and top property.
#product-image { position: relative; top: 3px; }
Thanks for the help in advance.
Community feedback
- @funficientPosted about 1 year ago
Hey @abhishek-baliyan-dev! Great solution!
The breakpoint for desktop is included for reference to the designs that are included. The size of the designs are based on the breakpoint sizes as far as I understand. It is useful because some desktop screens are very big which would require using max-width, or minmax() rather than just padding and margins to position the items.
Regarding your other question, I suspect the space is because you handled the image and the text as sections rather than divs. A section, as far as I understand, is more like a fixed block on the page, while a div is an element on the page or in a block that can be positioned in any way, which gives it more flexibility. But disclaimer, I'm still learning too. :-)
Hope this is helpful! Enjoy your next challenge!
Kate
Marked as helpful1@abhishek-baliyan-devPosted about 1 year ago@funficient Thanks for the reply. You just solved my two issues.
0
Please log in to post a comment
Log in with GitHub
Join 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