Responsive design using flex

Community feedback

• 

  Yari Morcus•500

  @YariMorcusPosted almost 2 years ago

  Hi @Carl,

  First of all, congratulations on completing this challenge! I have been taking a look at your component and must say that it looks good.

  I do have some feedback I want to share with you.

  Visual

  1. Just like you already mentioned (in some way), I noticed that your component is not responsive between breakpoint 375px and 528px. A horizontal scrollbar is shown, and both your title, old price, and button are overflowing its container.

  Tips

  1. Try to use a little bit more of the semantic HTML5 elements, such as <main>, <article> and <section>. This is important for assistive technologies because it communicates better what the role of a specific element is. A div or span for example, does not communicate any meaning or role, which is important for people using these technologies.
  2. You can use <button> as an icon button. This point also relates to point one above (do not forget to define an accessible name if you do so).
  3. Some classes contain one or two whitespaces in front or after of the name. You should remove them for neatness.
  4. Try to define a more descriptive name for your images. This is important for search engines so they can understand better what an image is about. img-46292547.jpg as an example doesn't say a lot about what it can be (does it represent a car, food, or an animal?). As an example you could name your image grabielle-essence-eau-de-parfum-bottle.jpg.

  Things you did good (may also be said)

  1. You are using utility classes as should (they only do one thing).
  2. Your design looks good on both mobile, tablet, and desktop (disregard the breakpoints for this moment).
  3. You added a hover state to your button (a simple thing, but plenty of people forget it or the color used isn't visible enough).

  I could give you some more feedback and tips but I think this should do it for now.

  However, I hope you can do something with the feedback and tips I gave you. If you have any more questions, feel free to ask me.

  If I made a mistake somewhere in this post, feel free to correct me and keep building awesome things 😄

  0