responsive using media query

Community feedback

• 

  P

  visualdennis•8,375

  @visualdenniss

  Posted over 2 years ago

  Hey there,

  good job completing the challenge successfully. Your implementation looks great overall. One tip i'd have is that i noticed there is a little tiny white space below the image.You can get rid of that easily by:

  img { display: block }

  images are technically set to display: inline (like text) by default but behave like inline-block (meaning one can set width and height explicitly). You can see that text have usually some tiny white area below and above the letters. So this is where this behaviour comes from. By display: block, you can get rid of that.

  Hope this was helpful!

  01

  Marked as helpful
• 

  Alexej Kunz•60

  @Orchi1904

  Posted over 2 years ago

  Hey @aaishver,

  I am very happy with your solution, it looks great. There are only three small things that make it better in my opinion:

  • It is great that you used a footer element for the attribution but the footer element should be inside the body element, because the footer is part of the website

  • Your solution looks even better if you center the card. This is possible if you add the following things to your body-selector in your CSS:

  body{
      padding-top: 8rem;
      background-color: hsl(30, 38%, 92%);
      margin: 0; /*Get rid of unnecessary margins*/
      padding: 0; /*Get rid of unnecessary padding*/
      height: 100vh; /*Body height is now full viewport height*/
      display: flex; 
      flex-direction: column; /*Use this so that the card and the footer are below each other and not next to each other*/
      justify-content: center; /*Center the card vertically*/
      align-items: center; /*Center the card horizontally*/
  }
  

  • <p> are not allowed as a child elements of <button>. You should rather use a <span> element inside the button like so:

  <button>
     <img src="images/icon-cart.svg" alt=""/>
     <span>Add to Cart</span>
  </button>
  

  I hope this was helpful for you. Happy coding!

  01