How to make drop down menu smaller?

**Please do not edit this for live***

Hi,

I was wondering how to make the drop down menus for these products less wide?

At the moment the drop down arrows are also cut off on the page.

https://www.jotform.com//?formID=42711559318962

https://buymorefans.com/2-for-1-sale-order-page

Thanks.

**Please do not edit this for live***

Hello,

I've cloned your form and tried on my side.

You can inject following CSS codes into your form:

.form-dropdown {

    width : 200px !important;

}

If you need further assistance, do not hesitate to contact us. We will glad to help you.

Thanks.

Hi,

When I inject that code it creates a new problem of the credit card fields not being aligned. The expiry month and year is under each other when they are suppose to be side by side.

How can I make the drop down menus smaller with this problem?

**Please do not edit this for live***

Thanks

Hello again,

I am sorry for the inconvenience you had.

I've tried again and I've managed to fix your problem. Please inject these CSS codes below in order to make drop box smaller without affecting the other drop-down lists:

.form-sub-label-container{

width : 300px;

}

#input_15_quantity_1012_0{

width : 200px;

}

#input_15_quantity_1015_0{

width : 200px;

}

#input_15_quantity_1014_0{

width : 200px;

}

Please do not forget to remove the other CSS codes, the ones I had told you to inject before.

If you need further assistance, please do not hesitate to contact again.

Thanks in advance.

Hi Candy,

The new CSS did not work for me. Not only are the expiry month and year under each other. The last name field is very far to the right and the security code field is under the card number.

I'm sure you've shopped online before and this is not how a credit card field should look even in your example.

*Please do not edit this for live***

Could you please try and make it look like this form:

*Please do not edit this for live***

Thanks!

Hi,

The reason that these CSS codes are not working are because the other dropdowns on credit card field are also affected by the codes you injected. 

Here is what you should inject to avoid this:

.form-dropdown.cc_exp_month {

    width : 150px !important;

}

.form-dropdown.cc_exp_year {

    width : 150px !important;

}

.form-dropdown {

    width : 300px;

}

The first two rows that I highlighted with green are there to make sure that the dropdowns on credit card field are not affected by the later one that I highlighted with pink. 

Please try this and see if it is working. If you still find the ones near Instagram, Facebook and Twitter too wide, you can decrease the value 300px and see what fits best. 

Another suggestion of mine is to add Mobile Responsive Widget to your form. When the customers browse your form through mobile devices they will not be affected by the changes of mobile display when you use this widget:

https://widgets.jotform.com/widget/mobile_responsive

Please contact us again if you need any further assistance. 

Hello again,

Besides my colleague Owen, I've tried again and I think I've managed to fix your problem this time. Please inject these CSS codes below in order to make drop box smaller without affecting the other drop-down lists:

#input_15_quantity_1015_0{

width:200px !important;

}

#input_15_quantity_1014_0{

width:200px !important;

}

#input_15_quantity_1012_0{

width:200px !important;

}

.form-product-item .form-sub-label-container {

    margin : -25px 9px 0px 62px;

}

I've deleted the other CSS codes injected before and included only those codes into the form. This codes above does not effect the drop down lists of payment fields.

I hope your issue is fixed as you can see the screenshot below:

Thank you for your patience.

Hi,

I have used the solution provided by Owen and it has fixed the drop down width. However I found another problem when checking the form on mobile.

The credit card fields are all miss aligned and does not look they same as on desktop.

**Please do not edit this for live***

How can I get the credit card number and security code fields side by side?

How to get the expiry month and year side by side without affecting the desktop view?

**Please do not edit this for live***

Thanks!

Hello again,

I've cloned your form on my side and I've injected the following CSS codes in Designer:

.form-dropdown.cc_exp_month {

    width : 150px !important;

}

.form-dropdown.cc_exp_year {

    width : 150px !important;

}

.form-dropdown {

    width : 300px;

}

.form-sub-label-container{

display: table-cell !important;

width : 300px;

}

.form-sub-label-container{

margin-right: 0px !important;

}

.form-address-table{

font-size:12px;

}

I've checked on my Android mobile phone and I've seen the following screenshot:

I hope this helps. Thanks.

Hi Candy,

Thank you for your answer. While your CSS did fix most of the problems. It also placed the drop down menus under the image making the form very long.

Also the dash that is suppose to be between the expiry month and year is under the drop down when I checked on ipad.

Is there are way to fix this?

Thanks,

**Please do not edit this for live***

Hi,

Seemingly we need to shorten the width of dropdown menus here. Please try editing your existing CSS code like this:

.form-dropdown {

    width : 250px;

}

.form-dropdown.cc_exp_month {

    width : 125px !important;

}

.form-dropdown.cc_exp_year {

    width : 125px !important;

}

All you should do is to edit the numbers that I highlighted with pink. Please try these and see if they fit well.

Here is the screenshot of your form on an iPad:

I also checked it on some other mobile platforms and there does not seem to be an issue with it. 

Let us know if you need any further assistance.