
Design comparison
Community feedback
- P@cookie-monster01Posted 4 months ago
Hi, I would like to share some knowledge based on whatever I have learnt:
-
.content - use min-height instead of height. min-height basically tells you the minimum height of an element/container, allowing it grow if required. height is restrictive/fixed to the given height, I understand that you have given it a 100vh and I wonder if it makes a difference in this case? if you or someone else can explain this?
-
I noticed that you are giving color: var(--white) on multiple elements, if you apply it on the parent element, children will inherit the color, and same goes for the font-size. This way you can avoid repeating the code.
Please correct me if I'm wrong.
Marked as helpful0P@rinta-gitPosted 4 months ago@cookie-monster01 Thank you for your suggestions! I used height instead of min-height because the content is static and will not exceed the viewport height. Therefore, changing to min-height wouldn't impact the layout in this case, but I appreciate your recommendation, and I agree that using min-height is a standard best practice.
Regarding moving styles to the parent element, these styles cannot be directly applied to the parent because not all child elements share the same styling. However, I've ensured that the common styles are reused effectively across the individual child elements.
I've considered both of your suggestions and made the necessary updates to my code. Thanks again for your valuable feedback!
1 -
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