Responsive Product Preview Card

Community feedback

• 

  jl-stephenson•100

  @jl-stephensonPosted 3 months ago

  Hi Daniel,

  This looks like a really accomplished solution!

  A couple of questions/thoughts:

  1. Below 600px the two-column layout begins to look quite squished. You've set the breakpoint to 460px - what is the reason for that? I think the transition would be smoother with the min-width set wider.
  2. Why did you choose to use <article role="main"> rather than the <main> element? Is there any advantage to doing this?

  Hope that's useful!

  0

  ---

  

  P

  Daniel Dominguez•150

  @dominguez-danielPosted 3 months ago

  Hi @jl-stephenson,

  I appreciate your comments!

  1. When testing across multiple device types, the transition from two column to one is better suited for mobile devices < ~460px based on mobile VP width and maintaining the common 1rem padding on mobile as shown in the design. While it may seem squished, the card and its contents respond accordingly while remaining legible even on widths smaller than 300px.

  2. There should only be one main on a page where as in a real world app there could be multiple product card components. Since these cards are self contained it makes them the perfect candidate for the use of the article element. I gave it the role of main rather than just wrapping the article in a main because I would then need to add a heading to the main as well, which is not part of the design. I found this approach simpler for the sake of this project.

  0