Design comparison
SolutionDesign
Community feedback
- @MikDra1Posted 2 months ago
- The @import rule for Google Fonts can impact page load times. Use a <link> tag in the HTML <head> instead.
- The font-optical-sizing: auto; property might not be supported by all browsers. Verify its compatibility and effectiveness.
- The --breakpoint-mobile: 768px; variable is defined but not used. Implement media queries to utilize this breakpoint for responsive design.
- Resetting margins with margin: 0; is good practice, but make sure it's applied consistently and doesn’t affect spacing negatively.
- The box-shadow: 10px 10px black; on .container may be too harsh. A more subtle shadow might look better.
- The border-radius: inherit; on .hero-image relies on parent elements. Ensure this produces the desired visual effect or set a specific radius.
- The general div selector styles might unintentionally affect other elements. Use more specific classes to avoid unwanted styling.
- Remove unnecessary inline comments, such as /12px;/, for cleaner code.
- Ensure all defined variables, like --breakpoint-mobile, are actively used in your CSS.
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful0 - @Djamel1133Posted 2 months ago
I have fixed the issues you pointed out. Regarding the use of "inherit," I did it intentionally so that the image's radius follows the same style as the global container. Thanks, it was very helpful.
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