
Submitted about 1 month ago
Responsive grid section created with Angular 18, Sass and SEO
#angular#sass/scss
@Gbw699
Design comparison
SolutionDesign
Community feedback
- P@kephaloskPosted 29 days ago
Nice solution :) I had a look at your card.component.scss and noticed the deep nested structures:
.container { ... header { ... .name-container { p { margin: 0; } ... } } ... }
In S/CSS it's best practice to avoid deep nesting of elements. A flatten hierarchy improves the readability of your code, e.g.:
.container { padding: 1.15rem 2.3rem; border-radius: 10px; background-repeat: no-repeat; background-position: right 2rem top 0; background-size: 100px; @media (min-width: 1200px) { background-position: right 6rem top 0; } } .name-container { ... } header { display: flex; align-items: center; gap: 2rem; } p { margin: 0; }
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