[Resolved] woocommerce dropdown td.value to set a fixed width

[Jose]

Dear GPP majesties,

I have the feeling that the width of the drop-down select for attributes is causing to have an extra margin to the right of my product page on mobile. Might be something else…

What I’m after: is it possible to the set a max-width for the drop-down select field (td.value) of attribute option? (you might notice the placeholder text has many characters, the string with “rectangular” is the longest possible)

Also, can you assist in displaying the td.label in ‘block’ for mobile, while in desktop remains ‘inline’, please?

By the way, if you spot what else can be causing the page to get a margin on mobile and become horizontally scrollable, please advice.

Being grateful for your support as always, I’ll wait for your responses. Blessings!

[David]

Hi Rafik

the horizontal scroll looks to be related to the Anywhere Elementor template set-up, just inspecting the Price element i can see that element is wider than its container. Theres quite a lot of negative margins on some elements as well which will cause this type of behaviour.

[Jose]

You’re absolutely right David! Thanks for your time looking into this, very helpful.

The items with -350px in margin were the big disruption, now fixed. I’ll try to lay the elements with a different approach.

Returning to the block or inline array of the table.variations (td.label and td.value), is this in your hands via CSS or we’ll need to reach AE for support over this matter? (I already ask them for help, they say is a request many users are expecting AE to handle, but until then…)

Appreciated your help, you’re good Bro!

[David]

You can target the TR and TD to display as blocks like so:

@media (max-width: 768px) {
    .variations tr, .variations td {
        display: block;
    }    
}

[Jose]

Awesome David, thanks!
That does the job.
Also, I finally got the code right and manage to customise the fixed width required, colours, etc.
I’ll carry on with the rest of customisations.
Thanks a lot!

[David]

Glad to be of help

[Author]

Posts