What challenges did you encounter, and how did you overcome them?
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%);].
@mkboris
Posted
-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. Just transform: translate(-50%, -50%); is sufficient
Marked as helpful
@Dev-musty
Posted
Hi @mkboris Thanks for the clarification.
@TedJenkler
Posted
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 helpful
@Dev-musty
Posted
Hi @TedJenkler Thanks you for the advice. Will be sure to implement them in future projects.
@MikDra1
Posted
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 helpful
@Dev-musty
Posted
Hi @MikDra1 Yes i did find it helpful, thanks.
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
