HTML & CSS Grid, Mobile first approach

Community feedback

• 

  Rebecca•190

  @bexicaaaPosted over 3 years ago

  Thank you very much :) I will defenitely make some additional changes to the code. Have a lovely day!

  0
• 

  Rebecca•190

  @bexicaaaPosted over 3 years ago

  I updated the solution...it is not centered :/

  0

  ---

  

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  @rebecca0208 I'll try to remember to take another look when I'm on my computer tomorrow ☺

  0

  

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  In the meantime, I recommend

  • removing all of those headers. Div is fine. Lots of headers on a page will cause problems for screenreader users
  • changing h4s to something like h2. H4 is just low down the heading chain. I doubt these cards would ever fall lower in the hierarchy than h3 at their lowest.
  • adding some padding to the main wrapper so the content can't touch the sides of the screen on mobile.
  • changing font size to rem. That's really really important. Never have font size in pixels

  0
• 

  Rebecca•190

  @bexicaaaPosted over 3 years ago

  Thank you Grace, the best mentor ever! :D

  0
• 

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  Hi Rebecca,

  To center your content like you asked, you need to take alll the styles off the main-wrapper. That grid wrapping your other grid is just not necessary. Instead, give your body a min-height of 100vh (viewport height), make that a grid with place-content center (or make it display: flex; align-content: center;)

  body {
    /* max-height: 1000px; */
    min-height: 100vh;
    display: grid;
    place-content: center;
  }
  
  .main-wrapper {
    /* max-height: 1000px; */
    /* margin: auto; */
    /* align-items: center; */
    /* justify-content: center; */
    /* display: grid; */
    /* grid-template-columns: auto; */
    /* grid-template-rows: auto auto auto auto auto; */
    /* padding: 40px; */
  }
  

  0