Responsive Stats Preview Card Component

Community feedback

• 

  Yazdun•1,310

  @Yazdun

  Posted over 3 years ago

  Hello Guilherme ! Well done on this challenge. I studied your approach a little bit and here are issues I found :

  GIT ISSUE

  • Before we get to the solution itself, There is a issue with your repo. I suggest you to create a main branch and put each solution on separate branch, so it will be easier to maintain the repo and also other people can contribute to your code more easily !

  SOLUTION ISSUE

  • You don't need two media queries, first write your style for mobile and only then, write a media query for desktop.
  • Instead of span, You must use div for block level elements, for example .text-content is a block level element so you must use div instead of span.
  • for stats, You'll be better off with something like

  <ul>
        <li>10k+<span>companies</span></li>
        <li>314 <span>templates</span></li>
        <li>12m+ <span>queries</span></li>
  </ul>
  

  instead of using div and span and heading. using ul is more efficient in this case IMO.

  • html elements are block level by default ( also this is one of the reason for why approaching mobile first is better ), so you won't need display:flex and flex-direction:column for initial style, you get the column by default.
  • Specify two font families in your styles, so if one of them is not supported by user's browser, the other one will be loaded and your design won't break.
  • Instead of .page-container, Use

  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  

  on body to centralize your element.

  • Instead of giving h1 and p text-align:center;, give their parent text-align:center and all children will inherit it.
  • You have access to the initial style you write for a element in media queries, so you only need to change parts that need to be changed, for example you don't need to specify font-family in media queries, it will remain the same anyway unless you want to change it.
  • Use prettier extension on your IDE to format your code.

  ✅ Also I opened a pull request to your repo which will fix some of these issues

  I hope this was helpful

  12

  Marked as helpful