Design comparison
Solution retrospective
Challenge faced [Vertically centering div and applying the drop shadow effect] [MDN documentation on filter effect and W3school documentation on centering div] helped understood the concept.
What specific areas of your project would you like help with?When centering div horizontally and vertically, what's the purpose of having both[-ms-transform: translate(-50%, -50%); & transform: translate(-50%, -50%);] together why not just [transform: translate(-50%, -50%);].
Community feedback
- @mkborisPosted 3 months ago
-ms-transform: translate(-50%, -50%);
ensures compatibility with older versions of Internet Explorer that require the -ms- prefix. But I don't think it's necessary today as most modern browsers support the unprefixed transform property. Justtransform: translate(-50%, -50%);
is sufficientMarked as helpful1 - @TedJenklerPosted 3 months ago
Hi @Dev-musty,
Nice project! Here are a few suggestions for improvement:
Minimize the Use of Divs: Try to use <div> elements sparingly. They should mainly be used when you need to create a distinct styled element, like a card with borders and other specific styling. Otherwise, consider using Flexbox and Grid for layout design—they’re more powerful and reduce the need for unnecessary <div>s.
Consistent Styling: Always include * { box-sizing: border-box; } and body { margin: 0; } in your projects. This helps maintain consistency across your designs and prevents unexpected layout issues.
Simplify Centering: To center your content, you can streamline your HTML by removing unnecessary <div> elements. Keep a single <div> for the card, and then use display: flex, justify-content: center, and align-items: center on the body element. This approach makes centering content much easier and cleaner.
Best, Teodor
Marked as helpful0@Dev-mustyPosted 3 months agoHi @TedJenkler Thanks you for the advice. Will be sure to implement them in future projects.
1 - @MikDra1Posted 3 months ago
If you want to make your project just like the design I encourage you to use the Pixal Perfect extension
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful0
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