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 HTML, Grid and SCSS infocard

@jglopezre

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


Greetings. Please tell me how I can improve SCSS implementation. The problem that I have found was, in mobile mode, height less than 700 px don't show the card fine. The mobile browser don't allow me screen scrolling. Thank for your attention.

Community feedback

CyrusKabir 1,885

@CyrusKabir

Posted

hello my dear friend ♥ your stats card it's good and clean at all but here some little problems :

  • try use more semantics elements like <main>,<footer>,<section>,etc.
  • actually it's hard to read texts on your card so change font-sizes a little bit (specially the text bottom of numbers)
  • and in main design the "m"&"k" in numbers are upper case at last it was good and clean wish you good luck and go ahead for more challanges ♥♥♥

Marked as helpful

0

@jglopezre

Posted

@CyrusKabir Hello, I fixed semantics elements, I am working on font size to make card bigger and easy to read. Thanks.

1
Juveria Dalvi 1,375

@Juveria-Dalvi

Posted

hey.. the accessibility issue says that you should have wrapped all divs in <main> which is the semantic tag ,except for the div with class attribution that should be wrapper in <footer> tag for more details refer w3school.com

0

@jglopezre

Posted

@juuveria I fixed it, Thank.

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