Need help fitting variant into pill on product page

Store Design
, , ,

Topic summary

A user needs help adjusting shoe size variant buttons on their product page so they display in a single row instead of wrapping to two rows on mobile devices.

Solution Provided:

  • Access the theme code editor via Online Store → Theme → Edit code
  • Open the theme.liquid file
  • Insert custom CSS code before the closing tag
  • Save the changes

The response includes code snippets and visual examples showing the expected result, though the specific CSS implementation details are encoded in the original post. This appears to be a CSS customization issue specific to mobile responsive design for product variant display.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I need to fix the shoe sizes, so they can fit into a pill on one row instead of two. Only on mobile. Thanks for your help

https://81e325-28.myshopify.com/

0007

unnamed (8).jpg
unnamed (8).jpg828×1792 121 KB

2 Likes
2
  • Here is the solution for you @radaApeta
  • Please follow these steps:
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
  • Here is the result you will achieve:

BSSTekLabs_0-1726667486650.png
BSSTekLabs_0-1726667486650.png371×489 29.3 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like