@jl-stephenson
Posted
Hi Daniel,
This looks like a really accomplished solution!
A couple of questions/thoughts:
- 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.
- 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!
@dominguez-daniel
Posted
Hi @jl-stephenson,
I appreciate your comments!
-
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
1rempadding 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. -
There should only be one
mainon 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 thearticleelement. 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.
