Stats preview card

Community feedback

• 

  Gareth•410

  @Gareth-MoorePosted 3 months ago

  Well done Matey! Good practice I bet.

  If I were to nitpick I'd offer the following suggestions:

  1. You've used incredibly small font sizes (10px). Consider that you should use 16px as you're smallest size for normal content. (a copyright or T&C could be smaller for example).

  2. You've used hard widths for many things like your heading and paragraph elements. You can instead set a max-width and allow them to grow into their space but be limited to a certain width. To make sure you have space around the element put padding on the parent element. E.g.

  <div style="padding: 1rem">
  <h1 style="width: 100%">Hello</h1>
  <p style="width:100%">It's a me, Mario!</p>
  </div>
  

  Note: block level elements have width: 100% by default (like h1 and p).

  In the above, the h1 and p elements take up all the space except for 1rem on the left and 1rem on the right. Making them fit in nice and snug.

  3. The breakpoint for the larger screen-size is too early and so you have a container that is breaking out of the viewport/screen. Consider putting the breakpoint later, at about 800px. Then for the mobile view, give the container a max-width: 380px (or about there) and margin-inline: auto (same as margin-left: auto & margin-right: auto) to center it. There will be empty space around the container at medium screen sizes but it's way better than having the container outside the viewable area.

  4. This is a bit more complicated but use padding over margin for spacing elements. The reason is that margins don't have background colours, you can only make changes to the content box + padding, and margins collapse on each other and you might be scratching your head as to why a margin is not showing up even though it's set, that is because if there is a top margin, it will collapse with margin above it. (2 touching vertical margins will collapse on each other). Prioritize using flex/grid gap for spacing, then padding, then positioning (top, left, right, bottom, inset etc) and lastly (if you have to) margins. It will save you a good amount of heartache.

  So, you're main container has a width: 70%. You can get a much better result by setting a max-width: 380px (or similar value) and setting it's margin to 1rem/16px or setting body { padding: 1rem }. In this particular case I'd set the margin on the .container because you may not want padding through the entire body, say if you had a banner going from left to right, it would look stupid with padding on either side.

  Anyway, hope that wasn't too much. Best of luck!

  0

  ---

  

  Wina•90

  @devWinaPosted 3 months ago

  @Gareth-Moore the fact you took out the time to really explain, is 🤯. Thank you so much

  0
• 

  Gareth•410

  @Gareth-MoorePosted 3 months ago

  Well done Matey! Good practice I bet.

  If I were to nitpick I'd offer the following suggestions:

  1. You've used incredibly small font sizes (10px). Consider that you should use 16px as you're smallest size for normal content. (a copyright or T&C could be smaller for example).

  2. You've used hard widths for many things like your heading and paragraph elements. You can instead set a max-width and allow them to grow into their space but be limited to a certain width. To make sure you have space around the element put padding on the parent element. E.g.

  <div style="padding: 1rem">
  <h1 style="width: 100%">Hello</h1>
  <p style="width:100%">It's a me, Mario!</p>
  </div>
  

  Note: block level elements have width: 100% by default (like h1 and p).

  In the above, the h1 and p elements take up all the space except for 1rem on the left and 1rem on the right. Making them fit in nice and snug.

  3. The breakpoint for the larger screen-size is too early and so you have a container that is breaking out of the viewport/screen. Consider putting the breakpoint later, at about 800px. Then for the mobile view, give the container a max-width: 380px (or about there) and margin-inline: auto (same as margin-left: auto & margin-right: auto) to center it. There will be empty space around the container at medium screen sizes but it's way better than having the container outside the viewable area.

  4. This is a bit more complicated but use padding over margin for spacing elements. The reason is that margins don't have background colours, you can only make changes to the content box + padding, and margins collapse on each other and you might be scratching your head as to why a margin is not showing up even though it's set, that is because if there is a top margin, it will collapse with margin above it. Prioritize using flex/grid gap for spacing, then padding, then positioning (top, left, right, bottom, inset etc) and lastly (if you have to) margins. It will save you a good amount of heartache.

  So, you're main container has a width: 70%. You can get a much better result by setting a max-width: 380px (or similar value) and setting it's margin to 1rem/16px or setting body { padding: 1rem }. In this particular case I'd set the margin on the .container because you may not want padding through the entire body, say if you had a banner going from left to right, it would look stupid with padding on either side.

  Anyway, hope that wasn't too much. Best of luck!

  0