Responsive Stats preview card component

Community feedback

• 

  Darko•980

  @dtomicic

  Posted over 3 years ago

  I would have to agree with the comment above, I always start mobile-first and it's so much easier for me since I end up only using one or two breakpoints (usually just 768px but sometimes also 1440px) if it's not a larger project then more breakpoints are of course useful. But for small project like this I think you could've easily pulled it off going mobile first from 375px and then make the card for that dimension and give it a max-width and then on 768px you just convert it into another style and that's it.

  Writing mobile first usually makes your job a lot easier and less frustrating.

  Great job, listen to the advices in the comments above and keep on learning 😊

  11

  Marked as helpful
• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 3 years ago

  Hi there! 👋

  It's great that you wrap all the page content with the correct landmark elements! Good job! 👍

  I notice there's no meta viewport tag. Every responsive site must have that. Why do you remove that?

  Regarding media queries breakpoints, I would recommend not setting any specific breakpoints for every project. It's a good practice to only add media queries when the layout is start looks broken. I would recommend making sure that the site still looks on the screen above 1440px. I usually have a .container that has max-width to prevent the content from becoming too large.

  I would 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.

  That's it! I hope this information is useful! 😁

  12

  Marked as helpful
• 

  Melwyn•250

  @melwynt

  Posted over 3 years ago

  Hi 👋 I would also think that the "fix it as it breaks" approach is enough.

  Otherwise this solution looks quite popular on Stackoverflow:

  @media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
  @media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
  @media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
  @media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
  @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
  @media (min-width:1281px) { /* hi-res laptops and desktops */ }
  

  Hope this was helpful.

  Cheers and have a great weekend too 😀

  11

  Marked as helpful