A user is seeking to reduce excessive padding in variant dropdown combo boxes on the Focal theme, which currently requires scrolling to view all options. They want all variants visible without scrolling when the dropdown opens.
Solutions Provided:
CSS approach: Add custom CSS to theme.css file:
.combo-box__option-item:not([hidden]) { padding: 0px 18px !important; }
The padding value (0px) can be adjusted as needed.
JavaScript approach: Insert code snippet in theme.liquid file above the </body> tag (specific code not visible in conversation).
Current Status:
The desktop implementation is working successfully. The original poster is now asking for additional code to separately adjust padding for mobile devices, indicating the solution may need responsive modifications.
Summarized with AI on November 13.
AI used: claude-sonnet-4-5-20250929.
My products have a lot of different variants & in Focal theme the combo box has so much padding between the different variant options that you end up having to scroll to see them all, rather than them all just showing on the page when you click the dropdown.
Can anyone help me with a code to reduce the padding significantly between the combo box options? I’m assuming the font size of the options will need to be reduced as well to fit in the narrower padding. (Which is fine)
I’ve attached some photos below to give a visual on exactly what im referring to. Here is a link to my site as well:
