NFT-premium-card

Community feedback

• 

  Glow•140

  @TheAwesomeTechGirlPosted over 2 years ago

  thank you so much, this was so helpful

  0
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Glow, good job at attempting this challenge! What I would suggest is to first become more comfortable and familiar with the CSS you need for the HTML elements, and to also practice writing out some of the basic fundamental CSS because there are some things that need to be fixed here. It helps to have a look at how other people solved this challenge.

  I would focus on two elements:

  1. You want to be using the body selector for styling instead of grouping it with html; the two can be grouped together for resets, but html is really not meant for styling like body is. You'd also want to try to use some reset rules first, and then write a rule for the body that can help center everything. This all would look something like this:

  // with some super simplified reset rules
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html, body {
    width: 100%;
    height: 100%;
  }
  img {
    max-width:100%;
    display: block;
  }
  // everything else starts here
  
  body {
     background-color: hsl(217, 54%, 11%);
     min-height: 100%;
     display: grid;
     place-content: center; 
     font-family: 'Outfit' , san-serif;
     // notice that I have removed the 1440 fixed width 
  }
  

  2. In the .container class, instead of using fixed widths where the component is fixed and does not grow or shrink, remove the width and height, and change the margin to 1rem, then add a responsive width property called max-width:

  .container {
     max-width: 400px // you can change it as you wish!
     background-color: hsl(216, 50%, 16%);
     border-radius: 10px;
     margin: 1rem;
  }
  

  Resize your browser and watch the component grow and shrink!

  Lastly, your font faces aren't showing up; it looks like your font-family rule needs to be rewritten with the apostrophes in the right place, and you also need to add the Google font link.

  Good luck!

  0