Responsive web page using CSS grid, media queries and some more.

Community feedback

• 

  Atif Iqbal•3,200

  @atif-devPosted almost 2 years ago

  Hi Jordy, you did well. One thing, container needs to be vertically center as well. For centering you can use:

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  or you can learn centering from moderncss

  In your code, eliminate margin:1rem from body selector and change height as min-height: 100vh for centering.

  Hope you will find this Feedback Helpful.

  Marked as helpful

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  👾 Hey there! 👋 Here are some suggestions to help improve your code: 👾

  • The alt tag description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • Do not capitalize "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.

  • Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

  More Info:📚

  Del Element

  • For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using these unit gives users the ability to scale elements up and down, relative to a set value.

  • Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.

  Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

  Josh Comeau Reset

  Eric Meyer Reset

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎄🎁

  Marked as helpful

  0