Responsive using sass and media quieries, plis feedback🙏

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • The article and section elements are being used incorrectly ❌ and not needed for this challenge .

  • The image’s alt tag description needs to be improved upon ⚠️. Assume that you are describing the image to a someone over the phone.

  More Info:📚

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

  • This component requires the use of two images 🎑 at different breakpoints ⚠️. The picture element will facilitate this.

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:📚

  https://www.w3schools.com/html/html_images_picture.asp

  • The only heading ⚠️ in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a paragraph element.

  • 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

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

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  1

  ---

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  • NEVER ❌ do this as it creates accessibility issues for users and it is outdated, instead download a px to rem/ em converter in your code editor.

  html {
    font-size: 62.5%;
  }
  

  • Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset

  • For improved accessibility 📈 for your content, it is best practice ✅ to use rem for your font-size and other property values. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

  0

  

  Eduardo Daniel•120

  @202745EsquedaDanielPosted almost 2 years ago

  @vcarames Thank you so much. Youre amazing! Can you check my code again? How can i use sr-only class in my page? im using correctly the tag del?

  Have a nice day.

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @00lar

  Glad I could help! 😁

  The comment I left regarding the price explain how to apply it.

  https://www.tpgi.com/the-anatomy-of-visually-hidden/

  0
• 

  S MD suleman•3,530

  @sulemaan7070Posted almost 2 years ago

  hey Eduardo Daniel 😄,I have inspected your code and previewed your site.

  2. you should not specify the img height along with width:100% the width:100% is enough.because you have used height and width the image seems streched.
  3. as far as the media queries they are working fine hope my this helps you ..let me know if you need anymore help happy coding🔥🔥
  4. firtsly you have used the image tag and gave source set which is not a valid html you can use picture element like this .

   <picture>
    <source media="(min-width: 650px)" srcset="img_food.jpg">
    <source media="(min-width: 465px)" srcset="img_car.jpg">
    <img src="img_girl.jpg">
  </picture>
  
  

  Marked as helpful

  0