Return to previous page

How To Change Variations Select Input Width

This topic has 8 replies, 3 voices, and was last updated 9 years, 9 months ago ago by Jack Richardson

bharatk

Participant

July 22, 2014 at 20:09

Hi,

I checking a pre-laucnh site using the ID STORE theme and I noticed that on viewing the theme on the narrowest browser width (e.g. such as vertically on a smartphone) the variation labels overlap the variation option select box.

See screenshot below. I tried changing the width of select in styles.css but this did not make any difference.

Any help would be appreciated.

Thank you,

Bharat

#10464 Copied

7 Answers

Eva Kemp

Support staff

July 22, 2014 at 20:59

Hello,

Please provide us with the link where product variations are displayed. Also we don’t recommend to change styles in the original style.css file, but use custom.css. Here is the tutorial how to create it: http://www.youtube.com/watch?v=Qok2zRedRMY&list=PLMqMSqDgPNmD4uhGI1IBhr1iaEy81TMff&feature=share&index=1 (The video is related to Legenda theme, but the process is identical).

Regards,
Eva Kemp.

#10469 Copied

bharatk

Participant

July 23, 2014 at 09:00

Eva,

Thank you for the prompt reply.

I have tried using the custom css also but cannot find which class needs correcting.

The site is in maintenance mode as it is still in development but I am happy to send you a test user login if you can provide me with an email address or another way to send you the login details.

Thank you,

Bharat

#10492 Copied

Eva Kemp

Support staff

July 23, 2014 at 09:12

Hello,

You can send login details in Private Content on this forum. Private Content is visible only for administrators.
Thank you.

Regards,
Eva Kemp.

#10494 Copied

bharatk

Participant

July 23, 2014 at 10:15

Login details in private content,

Thank you.

Please, contact administrator
for this information.

#10498 Copied

Eva Kemp

Support staff

July 23, 2014 at 10:32

Please add this code into custom.css file:
@media only screen and (max-width: 479px) {.product_layout_variant2 .variations_form table.variations tr select { width: 170px !important; } }
You’ve been already provided with the tutorial link how to create custom.css.

Regards,
Eva Kemp.

#10502 Copied

bharatk

Participant

July 23, 2014 at 16:39

Eva,

Thank you for your quick prompt replies. Your custom styling worked by reducing the width of the select box but the hover styling for the select box also had to be updated with the same width…

@media only screen and (max-width: 479px) {.product_layout_variant2 .variations_form table.variations tr select, .product_layout_variant2 .variations_form table.variations tr select:hover { width: 170px !important; } }

Brilliant support.

Have a great day.

Bharat

#10538 Copied

Jack Richardson

Support staff

July 23, 2014 at 16:42

Hello,

You’re welcome!

Regards,
Jack Richardson

#10541 Copied
Tagged: change variations, select input, style, templates, width, woocommerce, wordpress
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘How To Change Variations Select Input Width’' has been successfully resolved, and the topic is now closed for further responses

How To Change Variations Select Input Width

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection