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

Responsive stats-preview-card

P

@joaoevribas

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

T
Grace 29,310

@grace-snow

Posted

You don't need to repeat the Google font preconnect links. Make sure you download the specific font weights you need. You can put them all in one link as supplied by Google fonts.

For the two halves of each stat use spans not paragraphs. Think about the content without styling. You wouldn't have 10k in its own paragraph would you - that's how you know it should just be a span inside the listitem.

The component only needs a single max width in rem, no width. The two halves of the component shouldn't need explicit widths or max widths. The columns on desktop should be two equal 1fr columns

There may be more feedback to give but I'm away from my computer so can't inspect.

Marked as helpful

1

P

@joaoevribas

Posted

@grace-snow Hi, thank you for the feedback.

I fixed everything you mentioned except the columns on desktop (two equal 1fr columns). I actually tried this when I was making the challenge but the problem is that the image does not fill all the space, there's a small purple gap (background) on the right side of the image.

According to the figma file, the full width of the card is 1110px so divided by 2 that's 555px for the left column and 555px for the image. But the image is only 540px and the left column (text part) is 570px.

The only way it does not leave a gap is if I put (570px 1fr OR 1fr 540px).

Am I missing something? How can I fix this without hardcoding the width of one column?

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