Design comparison
SolutionDesign
Community feedback
- @grace-snowPosted almost 2 years ago
Hello
As well as the viewport meta tag issue I raised on slack, you need to
- Use max width not width on the card
- Write the alt text properly. Look up how and when to use that attribute correctly
- Stop using complex css selectors like you're doing here. It will become completely unmanageable on larger projects. Instead use single class selectors, keeping css specificity as low as possible
- You should not be using the figure element unless content requires a caption
- The card should have padding. Elements inside it can have vertical margins
- Line height is usually unitless. It's quite unusual to see it written as rem (but not "wrong")
- You are misusing the section element. You don't need any element at all wrapping the heading and paragraph in this case, but even if you did it would be a div not section.
Marked as helpful2@Fathima-NuhaPosted almost 2 years ago@grace-snow could you help me with thosee complex css selectors you mentioned. pls mention them for me.
0@grace-snowPosted almost 2 years ago@Fathima-Nuha you need to fix the html first.
Then put classes on what you want to style. Don’t use complex selectors unnecessarily like
element > direct-child-element
. Instead put a class on what you want to style.Read about css specificity and you’ll start to understand why
Marked as helpful1
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