Responsive product preview card component using HTML and CSS

Community feedback

• 

  Sinisa Vukmirovic•1,690

  @SinisaVukmirovicPosted almost 2 years ago

  Hello!

  About your question, to address that issue you could make a "media query" for more breakpoints, targeting the width on which your design has issues when shrinking.

  But, you shouldn't stress about that. Only other developers can see those issues when shrinking. Ordinary users won't use developer tools, they are only on one screen size where they open your site.

  Make it look good on screen sizes the challenge provides you with. That is good enough for these challenges. If you want to make it look "real site" good, than do more media queries breakpoints.

  Marked as helpful

  0
• 

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

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

  • Since the images in this component add value and serve a purpose (displaying the product), it is best to use the Picture element and not the background-image property, as it will to use different images during different breakpoints.

  • 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

  0
• 

  JJ Fuentes•140

  @jjfuentes13Posted almost 2 years ago

  I also had issues with flexbox and eventually learned grid and used that. The only one I used flex was for the price div. Using a grid did eliminate the shrinking and expanding depending on the resolution size.

  Marked as helpful

  0