Responsive Stats preview card component

Community feedback

• 

  Darko•980

  @dtomicicPosted over 2 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 😊

  Marked as helpful

  1

  ---

  

  Joshua•130

  @dyntbnPosted over 2 years ago

  @dtomicic

  You've got me convinced, I'm on board with mobile-first! 😄

  Surprised you mentioned that, as I did, partially, ask for that reason, of having to create and maintain multiple media queries. 🤯

  I did have a lot of those same issues you pointed out, starting with a desktop-first approach, and scaling it mobile. It was taking large blocks of time, and thought there has to be a better method to this. I'll definitely try to utilize max-width more.

  I'm listening closely, this community has been very helpful at helping me learn the harder parts. Thanks Darko for your appreciation and for continuing to help me. Wishing you a great weekend! 😄👍

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 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! 😁

  Marked as helpful

  1

  ---

  

  Joshua•130

  @dyntbnPosted over 2 years ago

  @vanzasetia

  It has definitely been a journey of trial and error. There is a whole lot more theory behind HTML and CSS than I initially thought, and this community has been very helpful at navigating through those questions.

  There's still lots I am trying to learn and I very much appreciate the recognition. 😁

  The missing viewport meta tag was something I accidently removed when I was initially cleaning up the code generated using Emmet HTML shortcut !. Thank you for catching that!

  "Fix it as it breaks" seems to be the optimal solution that is pointed at, so I'll continue only adding media queries when necessary. Great idea on using max-width, I'll definitely keep that in mind too.

  Also, for the pointers on performant CSS and mobile-first, you got my attention, I'll start looking into these topics to improve on to add to my next challenge. 👍

  Thanks again Vanza, it was all very useful information. Wishing you a great weekend. 😄👍

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @dyntbn You're welcome! I am happy that you found it to be helpful! I wish you a great weekend as well! 👍

  1
• 

  Melwyn•250

  @melwyntPosted over 2 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 😀

  Marked as helpful

  1

  ---

  

  Joshua•130

  @dyntbnPosted over 2 years ago

  @melwynt

  Thank you, great weekend so far! 😁

  Looking through the post you linked, it does look like it is a mix of both. I'm going to research a bit more, as there's a lot of cool techniques in there that I'm not familiar with.

  This is very helpful, thanks Melwyn! 😄👍

  1