add override for mobile devices to show smaller swatches #3220
Conversation
There was a problem hiding this comment.
Since this goes against a11y guidelines, do we have a longer term plan to address this?
assets/component-swatch-input.css
Outdated
| @@ -10,6 +10,12 @@ | |||
| forced-color-adjust: none; | |||
| } | |||
|
|
|||
| @media screen and (max-width: 750px) { | |||
There was a problem hiding this comment.
You don't need the @media query here, we already override the size for the larger screens here:
dawn/assets/component-product-variant-picker.css
Lines 153 to 156 in 436e104
| @@ -1,15 +1,27 @@ | |||
| /* swatch-input lives in its own file for reusability of the swatch in other areas than the product form context */ | |||
|
|
|||
| align-items: center | ||
|
|
||
| } | ||
|
|
There was a problem hiding this comment.
Here are a couple funky things I noticed:
Desktop looks a bit off now
Here is how it looks when receiving focus
There was a problem hiding this comment.
The focus rings are going to be a really tricky part of this. I don't suggest trying to include this in the next release, personally.
|
@mkoenig-shopify Is this still something we want to try to pursue? |
|
@tyleralsbury it is yes but we got pulled into some P0s, planning to come back to this in march |
|
closing in favor of #3348 (review) |
PR Summary:
Really small PR to make the swatches a bit smaller on mobile. This will optimize the way they look/feel when selecting variants.
Why are these changes introduced?
We got feedback that the swatches were too large on mobile at 4.4rem - so we reduced them to 3.6rem
What approach did you take?
A media class in CSS
Visual impact on existing themes
Before:
After:
Testing steps/scenarios
Demo links
Checklist