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

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

Home Forums Support woocommerce dropdown td.value to set a fixed width

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #603430
    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!

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #603718
    David
    Staff
    Customer Support

    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.

    #603804
    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!

    #603911
    David
    Staff
    Customer Support

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

    @media (max-width: 768px) {
        .variations tr, .variations td {
            display: block;
        }    
    }
    #604045
    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!

    #604208
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.