Responsive stats-preview-card

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 8 months ago

  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

  João Ribeiro•90

  @joaoevribasPosted 8 months ago

  @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