Return to previous page

Drop-down menu on checkout page – width size setting

This topic has 10 replies, 2 voices, and was last updated 6 years, 5 months ago ago by Rose Tyler

Fantasia

Participant

November 19, 2017 at 23:17

Hello,
i’ve installed a delivery plugin to my WooPress+WooCommerce webshop. On the checkout page it has a drop-down menu, what inherits the css attributions of the WooPress theme. The width size of this menu is set to a fix pixel (as I see – but not sure 🙂 ), so it can’t fit to the div box that contains the menu, so the delivery modes appears half out of this box. On mobile, the settings became unuseable in this way.
Look at these screenshots: On PC – On mobile
Could you please help me, where can I found the settings of this drop-down menu in the css files?

Thank you,
Zsu

#177980 Copied Theme version: 3.2 WooCommerce version: 2.5.5

9 Answers

Rose Tyler

Support staff

November 20, 2017 at 09:15

Hello,

You may add custom css code in Theme Options > Custom css.
Please describe how I can recreate the problem on your site to give you example of css code. Also, provide wp-admin access in Private Content.

Regards

#178010 Copied

Fantasia

Participant

November 20, 2017 at 13:44

Hello,

if you go to the checkout (http://www.freshmood-design.hu/checkout/) page on my webshop (first you have to put any product to the cart), choose “Foxpost csomagautomata: 650 Ft” radio button on the right side of the page, under the product list. When you check it, the drop-down list appears next to the “SZÁLLÍTÁS” text. In Chrome browser it don’t fits to the div box all the time, in Firefox you have to resize the window smaller to generate the problem.

Wp-admin and ftp accesses added to the private content.

Thanks,
Zsu

Please, contact administrator
for this information.

#178066 Copied Theme version: 3.2 WooCommerce version: 2.5.5
Rose Tyler

Support staff

November 20, 2017 at 14:20
Please try to add this code in Theme Options > Global custom css:
```
@media(min-width:480px) {
  .woocommerce-checkout-review-order-table #shipping_method {
      padding-left: 0px;
  }
}
@media(max-width:480px) {
   .woocommerce-checkout-review-order-table #shipping_method select{
      width:100%;
  } 
}
```
Regards
#178067 Copied
Fantasia

Participant

November 20, 2017 at 14:52

Unfortunately nothing changes with the menu 🙁 Tried to change % and px values in the code but don’t caused differences 🙁

#178074 Copied

Rose Tyler

Support staff

November 20, 2017 at 14:58

Please clear cache and then check.

Regards

#178078 Copied

Fantasia

Participant

November 20, 2017 at 15:36

I refreshed the page with ctrl+F5, is it enough? On PC it doesn’t change, but surpisingly on mobile it became good! Here’s a video how the problem appears in the PC browser: video

But the main goal was to fix mobile problem, where it was unusable, and now fixed.
Now on pc it’s just looks weird… I’d be glad if we could make it better too.

Thanks,
Zsu

#178087 Copied

Rose Tyler

Support staff

November 20, 2017 at 15:49

I’ve changed code in Custom css to http://prntscr.com/hcvzwd + http://prntscr.com/hcw022
Please check now.

Regards

#178091 Copied

Fantasia

Participant

November 20, 2017 at 15:55

It’s perfect now, thank you very much! 🙂

#178093 Copied

Rose Tyler

Support staff

November 20, 2017 at 15:57

You’re welcome!

Regards

#178095 Copied
Tagged: checkout page, drop down menu, width size setting, woocommerce, wordpress
Viewing 10 results - 1 through 10 (of 10 total)

The issue related to '‘Drop-down menu on checkout page – width size setting’' has been successfully resolved, and the topic is now closed for further responses

Drop-down menu on checkout page – width size setting

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection