Design comparison
Solution retrospective
I had some issues with "resetting" the grid in the media queries, but I managed to figure it in the end - I think.
Everything else seems to have went okay, but I do have some questions I hope someone can help me with!
- We are given some sizes for desktop and mobile, and I'm not sure how to work with them. I believe my screen is 1920px wide, so do I have to do anything in the code to match the 1440px or is the given size mostly for those working on screen smaller than the 1440px? I hope my question make sense.
- Should I have added some shadow? It seems that some of the boxes have shadow, but in the mobile version the shadow seems a bit more random. I feel like all the projects have shadow on the bottom and right side, so is just something from FrontendMentor, or an actual design choice?
Community feedback
- @MtalafaPosted 12 months ago
Hi, Annika
Regarding your question about the sizes. 1440px refers to the size of your design. In your case this is the main. You can remove the margin from the main and add max-width 1440px. then in order to center it you use flexbox on the body adding a min-height of 100VH align items and justify content center
If you want it perfectly centered you need to remove the footer that is added by default. The one saying challenge by frontend mentor
Hope this helps. Have a good day
Marked as helpful0@VeksoePosted 12 months ago@Mtalafa Thank you for the answer! A good day to you too!
0 - @vgarmyPosted about 1 year ago
Hey, regarding the shadows, its a yes, you shouls add more shadow. Try something like this.
box-shadow: 0px 5px 42px -24px rgba(0, 0, 0, 0.43);
//Vlad
Marked as helpful0@VeksoePosted 12 months ago@vgarmy But in this case, is it on all the boxes? I feel like only the "outer" boxes that have some shadow, and the same boxes have shadow on in the mobile version, making it rather weird. Am I just seeing things wrong?
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