Nevermind, I figured it out

Solved
Highlighted
Tourist
11 0 6

nvm, i figured it out

 

thanks for looking :)

0 Likes
Highlighted

Success.

Shopify Expert
654 46 142

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: https://speedboostr.com/how-to-safely-edit-your-shopify-theme

 

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).
I also build custom apps and automated solutions.
Enjoy the adventure!
1 Like
Highlighted
Tourist
11 0 6

incredible. thank you so much rejoice

 

IMG_0281.PNG

1 Like