Focal Theme - How To Reduce Padding On Combo Box?

[hdkingy]

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:

https://pondstream.com/products/scott-aerator-skyward-fountain

What I have now:

What I am looking to achieve:

[Natasha-Saed]

1) Go to online store
2) Click on Edit Code
3) Open your theme.css file
4) Paste the below code at the bottom and save

.combo-box__option-item:not([hidden]) {padding: 0px 18px !important;}
You can change the 0px to your desired value.

[Moeed · Accepted solution]

Hey @hdkingy 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.combo-box__option-item:not([hidden]) {
    padding: 0px 18px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Scentsational]

Hi, are you able to assist me with adding a next and previous button to my product pages please. This is my site: https://scentsationalhome.com

[hdkingy]

Thank you, that worked wonderfully for the desktop. Is there another piece of code I can add in to edit the padding for mobile separately?