Responsive landing page using Flex

Community feedback

• 

  Precious Nkwor•440

  @Jeen-PreshPosted almost 2 years ago

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

  • Your whole content is supposed to be wrapped in a main html element

  More Info:📚https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main#:~:text=The%20HTML%20element%20represents,central%20functionality%20of%20an%20application.

  • The image’s doesn’t have an alt tag description, this needs to be improved upon ⚠️. It improves accessibility for screen readers

  More Info:📚https://www.w3.org/WAI/tutorials/images/

  • The HTML <picture> element allows you to display different pictures for different devices or screen sizes. ⚠️. The picture element will facilitate this.

  Here is an example of how it works: EXAMPLE

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

  More Info:📚 https://www.w3schools.com/html/html_images_picture.asp

  • 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:📚https://developer.mozilla.org/en-US/docs/Web/HTML/Element

  • 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.

  • Your "button" was created with the incorrect element. It should be created using the button element. So that when the user clicks on the button (with the help of JS) it should add the product to the cart.

  More Info:📚 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

  Happy Coding!

  Marked as helpful

  0

  ---

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hi @Jeen-Presh 👋!

  While I appreciate you wanting to help out the FEM community (I’m very flattered that you gave taken a liking to my suggestions style), I noticed that you are simply copy-and pasting my comments, word for word, even the emojis on other users feedback.

  More examples:

  https://www.frontendmentor.io/solutions/product-preview-card-component-tO-5T0LAG7

  https://www.frontendmentor.io/profile/Jeen-Presh

  I highly suggest, rewriting the suggestions, in your own words. You want to contribute to the community in your own way. Create your own style, be yourself. Not a copy of me.

  Again, Thank you for contributing to the FEM community!

  Happy Coding! 🎆🎊🪅

  0

  

  Precious Nkwor•440

  @Jeen-PreshPosted almost 2 years ago

  @vcarames

  noted

  Love your style lol. will re work on my suggestion style as requested

  0

  

  Sova•10

  @sova-mainPosted almost 2 years ago

  @Jeen-Presh Thank you so much for this information! I've learn a lot 😊

  0
• 

  Sam•160

  @Samcode001Posted almost 2 years ago

  First of all give some padding at mobile size by using @media query , such as: @media screen and (max-width:768px){ };

  then make the previous radius 0 and set the new radius as you wanted. Make Sure you give some responsive width like width: min(1440px,100% - "subtract the padding that u want here"); e,g --container-padding:2rem; min(1440px,100% -var(--container-padding));

  By using above method u can easily target the mobile view . for more information visit: https://github.com/Samcode001/product-preview-card

  for same card preview website.

  Marked as helpful

  0

  ---

  

  Sova•10

  @sova-mainPosted almost 2 years ago

  @Samcode001 I've seen your work about this preview card and its awesome! Thank you so much for your advice!

  0