Nevermind, I figured it out

11 0 6

nvm, i figured it out


thanks for looking :)



Shopify Expert
672 48 150

Nice, I like reading code too. 😃


What's happening here is when the sizes get into 3 digits (10.5, etc), the boxes are too large and can't fit 2 on a row because the padding / margins.


Here's how you can solve that:


option a) Decrease the horizontal padding on .single-option-radio label. In this example I dropped it down to 3px:


padding decrease.jpg


option b) Or you can decrease the horizontal padding of fieldset, like this:


fieldset padding.jpg


For either of these, check it on mobile / desktop to make sure it looks good on both. What you might end up doing is setting these changes for mobile only, for example:

@media screen and (max-width: 439px) {
  .template-product .fieldset {
    padding: 12px;

option c) You could make the gutters thinner. I would do this anyway so you can fit more content on your screen. You can use Chrome Dev Tools to inspect elements and see what's up, like this:


Screen Shot 2020-03-31 at 11.22.28 PM.jpg



On all these I made the edits in my local browser and found the CSS rules using Chrome Dev Tools. If you're not familiar with this workflow here's a guide I wrote:


Have fun!

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (free performance analysis tool).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
1 Like
11 0 6

incredible. thank you so much rejoice



1 Like