[SOLVED] Product Attributes Drop Down Box Width

[Gereon]

Hi,

I would like to change the size of the attributes drop down box, but I do not know how to do it. I am using prestashop 1.7.8.0 and template warehouse ver. 4.5.0. Unfortunately my support for warehouse template has expired. In the template backoffice there is a feature for pasting Custom Css code, but i do not know where to start with to change the size of this drop down box (I would like to make it much wider than default settings). Could you please help me with this issue? Thanks in advance

Wiktor

Edited December 2, 2021 by Gereon (see edit history)

[JBW]

Use the inspect function in your browser (right click on the drop down element) to identify the correct CSS selector

[Gereon]

Hi JBW, 

thanks for your respond. I have found where to change the size of the attributes drop down using the inspect function on my browser. But still I do not know how to write a custom CSS corectly. Please have a look on this print screen:

 

Edited December 2, 2021 by Gereon (see edit history)

[JBW]

Copy the code into custom.css and adjust the widths - you can test it first in the inspect tool

[Gereon]

Thank you JBW. One final question: After adjusting min and may width, should I paste this code:

.product-variants>.product-variants-item .custom-select2 {
    display: inline-block;
    min-width: 6rem;
    max-width: 14rem;
}

or with element. style?:

 

element.style {
}
.product-variants>.product-variants-item .custom-select2 {
    display: inline-block;
    min-width: 6rem;
    max-width: 14rem;
}

[JBW]

without element.style

[Gereon]

Thanks a lot, it's working. You have saved my day.