Responsive preview product card component

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi

  I’m afraid this does not fit on my mobile screen, it’s spilling off to the sides

  The html isn’t bad but you are causing yourself all sorts of problems with the way you are approaching responsiveness. I can’t stress this enough - Do not change root html font size like this. All this does is introduce accessibility failures and create really hard to maintain code. There is no reason 1rem needs to equate to 10px and no reason it would need to equate to anything else either. Just don’t do it.

  To make this responsive (the mobile version should be the base style of following best practices) the only things that need to change in a media query are

  • max width on the component
  • flex direction
  • height on image

  As this is a meaningful image it makes much better semantic sense to have it in the html in a picture element. The browser will then choose the correct image to serve for mobile and desktop.

  And there is no need for duplicate font link declarations in the head or multiple css files.

  Keep it simple

  Marked as helpful

  0

  ---

  

  Akinyemi Habeeb Aremu•150

  @Akinyemi4Posted over 2 years ago

  @grace-snow thank you very much.I’ll take note of that in subsequent challenges.Thank you for the nice and beneficial feedback.

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  @Akinyemi4 definitely take the time to refractor this one before moving on

  0