Responsive Product Review UI Using CSS Flexbox

Community feedback

• 

  Ahmed Nafrawy•150

  @Ahmed-NafrawyPosted 24 days ago

  Does the solution include semantic HTML? Yes it does, and great work btw but i have two concerns

  1. You should remove the attribution div and replace it with the footer (it will be much more better)
  2. I noticed you used only the desktop provided product image while the challenge provided you with one for the mobile view and the other for the desktop

  and to achieve that, there is a great trick using either html or css

  1. Using HTML >>> you should allow the browser to choose the suited image with respect to the width available for the card. and to achieve that you should use the follwing code : <picture> <source class="desktop--img" media="(min-width: 624px)" srcset="./images/image-product-desktop.jpg" /> <img class="card--img" src="./images/image-product-mobile.jpg" alt="Perfume" /> </picture> and this will let the browser choose form the image you provided

  2. Using CSS : this way is not adding neither the images inside html, instead using css like this background-image: url(./images/image-product-mobile.jpg) and style it as you want and in the larger screens you should change it the same way and choose the one that fits the browser width.

  Is it accessible, and what improvements could be made? Yes

  Does the layout look good on a range of screen sizes? Yes, but i think it will be more visually appealing if the button is centered in the mobile view as you did in the desktop preview

  Is the code well-structured, readable, and reusable? Yes

  Does the solution differ considerably from the design? No, not that much, just a one thing or two.

  Marked as helpful

  2