Stats preview card with grid and flexbox

Community feedback

• 

  Ehtisham Ali•150

  @EhtishPosted about 2 years ago

  Hello Eero, Congratulations on completing challenge. You have done a great job with media query.

  Few suggestions if you don't mind:

  • For next project, I suggest, try to make your font size responsive with one line of code. how you can do this describe below:

  html{ font-size: 62.5%; }
  
  /* For mobile */
  
  @media(min-width: 480px){
  html{ 
  font-size: 55%;
   }
  }
  

  • To see much more details about this code click
  • Add live url to your readme on github. It will be very benefical to showcase your work.

  best of luck

  0

  ---

  

  Eero Liuska•60

  @eerolliPosted about 2 years ago

  @Ehtish Thanks for the tip! I will try that next time

  0
• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Eero, congrats on finishing the challenge! good job with your media queries, you landed it for the first time!

  Regarding your question, I think that for this project is necessary to use them, because you need to switch your grid from 2 columns 1 row, to 2 rows 1 column depending on the screen size.

  I would like to give you some suggestions for your solution:

  • Try using a <main> tag to wrap all the main content of your page (in this case, the whole card could be on a <main>), and then you can divide it through <sections> to give your document a more semantically meaning, with this you will get an improvement on accesibility and the search engines will position your page better!.

  • The styles I think that are fine, maybe making the card a bit smaller and setting the media querie for a less pixel value could make it look better, but this is just a tiny fix that you can take for future projects.

  Hope my feedback helps you, if you have any questions, don't hesitate to ask me! good job!

  0

  ---

  

  Eero Liuska•60

  @eerolliPosted about 2 years ago

  @DavidMorgade Thank you for the feedback. Yes, I noticed the accesibility report and was wondering how to improve. Fewer divs and more semantic elements, if I'm not mistaken.

  1