Design comparison
Solution retrospective
I didn't know how to make the one-side box shadow and my media queries are not the best so what is the best practice
Community feedback
- @GerardoCianciulliPosted over 1 year ago
you are using @media (max-width: 375px) which would imply you are designing for desktop first and then you move into the mobile css within this block. It might be easier for you to try the reverse and start with mobile first as they tend to be the more finicky in my opinion. You can then use @media (min-width: 650px) which is a nice middle point between the mobile design and the desktop depending on how responsive you are looking to make either design.
Marked as helpful1 - @GerardoCianciulliPosted over 1 year ago
For the box shadow it actually is on both sides. Because of how pale the shadow is and blurry the reference image is it can be hard to see. I used a photo editing tool to help me zoom in and see the details. I also cropped out sections and saved them as separate images and opened them in my browser to help me with the dimensions and placement of these elements since I did not have the figma file to see the crisp details. If ever you want me to show you via screen share what I mean as this might not be clear in writing please message me directly I'd be happy to show you.
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