Mobile-first Frontend Mentor | Stats preview card component

Community feedback

• 

  Adriano•38,160

  @AdrianoEscarabotePosted about 2 years ago

  Hi Kira Weizman Shapira, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  Example:

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Kira Weizman Shapira•90

  @kiraweshPosted about 2 years ago

  Hi @AdrianoEscarabote, thanks for checking out my solution and for your feedback :).

  Thanks for the tip, I tried that and didn't really see much of a difference. I think it's because of the breakpoints I made. I didn't want the transition between breakpoints to be too weird. Anyway, I need to study well the guidelines of responsiveness, because I'm not sure I'm doing the right thing with these breakpoints.

  If you have any information that could help with this, I would greatly appreciate it

  0

  

  Adriano•38,160

  @AdrianoEscarabotePosted about 2 years ago

  no problem, to see a difference in this layout we can do this:

  removed:

  body {
     
      /* display: grid; */
  }
  

  I added:

  body {
      display: flex;
      flex-direction: column;
  }
  

  The grid gives space between the two child elements of the body! Prefer to use the grid in layouts that will need many columns!

  I forgot to mention one thing, to remove the scrollbar, instead of using a margin on the body, which is causing an external spacing, use padding that gives internal spacing!

  Marked as helpful

  1

  

  Kira Weizman Shapira•90

  @kiraweshPosted about 2 years ago

  @AdrianoEscarabote whoa, really mind blowing, lol.

  Thanks for the tips, the appearance of the page really much better now! :)

  1

  

  Adriano•38,160

  @AdrianoEscarabotePosted about 2 years ago

  @kirawesh happy coding!!

  0