Stats preview card component Using HTML and CSS

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted about 3 years ago

  Hi, Lawal! 👋

  In my opinion, the responsiveness for the site is a little more complicated than it should be. I suggest only having one media query for the mobile layout (it looks like you write the CSS for the desktop layout first).

  So, I recommend doing the following for the responsiveness.

  • First, I suggest only having one condition media query. It means that there's no need for the logical operators (and). In my experience doing Frontend Mentor challenges, I never write complex media queries.
  • Second, the site only needs one media query to be responsive. So, the initial styling for the desktop layout and the media query for the mobile layout. However, I strongly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.
  • Third, never limit the height of the body element. If you ever need to specify the hieght, use min-height instead.

  Those are three suggestions from me. In addition to those, I have some more feedback.

  • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
  • Always use single class selectors to reference all the elements that you want to style whenever possible. Using id is going to make your stylesheet have high specificity (hard to maintain). As a side note, ideally, id should be used for anchoring.
  • I suggest making the #lower-content as a list item. Also, swap the h2 with p instead. It's because if the site has no styling, it's more likely to be a list.
    • 10k+ companies
    • 314 templates
    • 12m+ queries
  • It's best to write HTML first without any styling. In my experience, it makes me decide on better HTML markup.
  • Also, you might find it helpful if you think of the HTML page as a document file. So, you can think of an h1 as a title and then h2 as a sub-title, etc.
  • On mobile view (375px * 640px), the card is too narrow. I suggest reducing the amount of margin on the .main-container element.

  That's it! Hope this helps. 😊

  11