Responsive Product preview card made with HTML5/CSS using flexbox

Community feedback

• 

  atanasov36•640

  @AtanasovCodePosted almost 2 years ago

  Hello!

  From what I can tell at a quick glance, you have a few problems that you should fix.

  1. The responsive design of your solution is flawed, the @media query kicks in when the screen size is 375px but by then the card is not correctly in view because it is too large to fit in the screen, (Tested on Firefox). You should set the @media query to activate at a larger size, around 500 or so pixels. You should play around with it and see which max-width works best depending on your design.
  2. As far as I can see <div class="right-col"> and <div class="product-info"> wrap around the same elements, so you can easily remove one of the divs. (not really a problem but you wanted to know how to use less divs)
  3. In your @media, you are applying a bit too many styles for a simple project like this. You can make the project responsive just by changing a few properties to your main wrapper (the one that contains the card). You don't really need to apply styles to the title and such if you apply the correct styles to them outside the @media.

  These are just my suggestions, otherwise your design looks great.

  0