Design comparison
Solution retrospective
Hello! On this project, I encountered an issue with the image. I used 'display: block, width: 100%, object-fit: cover' on the image, but when switching from mobile to desktop format, the image does not fill the div. Additionally, I had another question: for code readability, is it better to use as many .class and .id as possible, or is the goal to use as few as possible? Thanks in advance!
Community feedback
- @hassanmoaaPosted 10 months ago
- set a max-width for the parent element
<header>
or you can remove the header tag and put the overlay in the<picture>
tag and also set a max-width on it so you dont have many parents for a specific element, that may fix the problem.
For the id's and classes:
-
You want to use classes over ids because ids are harder to maintain and can only be used once and also you don't have JS in here so prob you won't need id's as much.
-
And it's not about using them alot it's about to maintain your code readability for yourself/reviewer or your team if someone will take the project after you, so you should choose a meaningful name for them and use them when needed so the code is easy to read and maintain.
-
You can try and choose a CSS approach like BEM or OOCSS.
Other than that you did good, keep up the work!
0 - set a max-width for the parent element
- @AbderrahmaneGuerinikPosted 10 months ago
Hey @Ynotlocin1! For the image issue try : width: 100%.
for your question about class and id , usually for styling developers use classes, id's are often used with JS.
0 - @peanutbutterjllyPosted 10 months ago
I can't recommend styling based on #id's, they're WAY too specific and can be a pain to override on bigger apps/sites.
Regarding classes, it depends on what your teams preference is - if you're coding solo, do what you like best.
0
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