How can I modify CSS to display dropdown menus side by side?

Store Design
1

Hi there,

What css in the template file do I need to change to make the drop-down menus appear side by side to fill the space, rather than being stacked on top of each other?

Currently they are like this:

del.jpg
del.jpg654×787 39.6 KB

A huge thank you in advance to anyone who can help me with this!

2

@dstephe4

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Thank you!

https://vip-bathrooms.myshopify.com/products/synergy-zeya-p-shaped-shower-bath?_pos=1&_sid=2da5991d4&_ss=r

4

@dstephe4

change to make the drop-down menus appear side by side to fill the space follow below steps :

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
#AddToCartForm-product-template.product-form{
  width: 100% !important;
  max-width: 100% !important;
}
.ymq-box .ymq-options-box{
  width: auto;
  padding: 0 10px;
}

This works well for your site

Best Regards !

5

@dstephe4

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file ymq-option.css

Step 3: Paste the below code at bottom of the file → Save

.ymq-options-box {
  max-width: fit-content;
}
6

Hero. Thank you!

7

@dstephe4

If this code helpful for your site then please Like and Accept Solution.