Responsive Stats preview card component

Community feedback

• 

  darryncodes•6,370

  @darryncodesPosted over 2 years ago

  Hi Alcpereira,

  Overall a really decent solution - nice work!

  Some feedback for you:

  • add display: block; to your image, this will remove the 4 pixels difference
  • add mix-blend-mode: multiply; to .hero-banner > picture::after and remove the opacity to match the image colour with the design file
  • regarding the transition from desktop to mobile, one solution would be to bring your media query in as soon as the image gets squished. Another solution would be to use relative units (REM) not absolute units (px) to help the design scale
  • here is a good video and an article that goes into the REM concept

  Good luck with it all

  0
• 

  Tabassum Fatima•215

  @tab21Posted over 2 years ago

  Hi @alcpereira

  Congratulations on completing the challenge !!

  Here I have some suggestions to improve it :

  First why you have space in mobile preview on right of the image is that because simply that is the actual image width and it doesn't increase it. Actually you have written height : 100% twice. You can just simply remove both the heights and add width : 100% which will also change its height in ratio to its image.

  Then also in mobile preview I suggest you give some top and bottom margin too to your card instead of auto.

  Also in desktop preview add these to .stats to add even spaces between your .stat (stats components)

  .stats{
      width: 100%;
      justify-content: space-between;
  }
  

  This takes the whole card width then spread the items in it with even space between them to justify.

  Overall you did great !!

  Hope this helps

  Happy Coding :)

  0

  ---

  

  alcpereira•190

  @alcpereiraPosted over 2 years ago

  @tab21 Hey Fatima, thanks a lot for your comments. I've implemented your fixes but there are still issues:

  • Mobile view: The 4 pixels difference still exists between the div.hero-banner and picture (or img)
  • On the transition between mobile and desktop, between 800-1000px wide screens, the transition on the image isn't the best. What would you recommend?

  0