Responsive Product Preview Card

Community feedback

• 

  Josh•1,110

  @josh76543210Posted 12 months ago

  Hi @bbuglz81,

  Congratulations on completing the challenge!

  Here is a quick suggestion for centering your card:

  First, give your body a minimum height so that your page takes up the entire viewport and display it using flexbox:

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  

  Next, you can center the card by simply adding a margin of auto all around main:

  main {
    margin: auto;
  }
  

  Hope this is helpful for you.

  Happy Coding!

  Marked as helpful

  1

  ---

  

  Brandon EB•20

  @bbuglz81Posted 12 months ago

  @josh76543210 Thank you SO much! I was bashing my head against that one for too long haha

  0

  

  Josh•1,110

  @josh76543210Posted 12 months ago

  @bbuglz81 Happy to help!

  0
• 

  K01wfd•690

  @K01wfdPosted 12 months ago

  Hi @bbuglz81, 1- One way to center your card vertically is to throw min-height 100vh on body selector then display grid, place-content center and that's it. 2- In addition to normalize.css, a simple css reset would make working with content much easier: *{box-sizing:border-box; margin:0; padding:0;}, this reset will make sure the content width includes will inculde the padding in the total width calculated by the browser, so you don't have to calculate the content width + padding, and this will reset all the padding and margins to 0.

  Marked as helpful

  1