Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats preview card, problem with the image width !

@Ynotlocin1

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

Hassan Moataz 1,860

@hassanmoaa

Posted

  • 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

@AbderrahmaneGuerinik

Posted

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
Steve 1,170

@peanutbutterjlly

Posted

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 GitHub
Discord logo

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