Quantity box needs to be wider

  • Resolved pbo999

    (@pbo999)


    5 years, 7 months ago

    Hope someone can help with this issue that’s exasperating me …

    I have a QTY box on this page https://www.pbosolutions.co.uk/product/test-bid-box/ that collects an auction bid value entered. However it is so narrow (3.5rem) that only 2 digits get displayed meaning that a third digit then scrolls the first digit off-screen leading to confusion for the bidder as to what amount he/she is bidding before they click the BID button.

    How can I make this box DOUBLE in width so as to easily accommodate 3 and 4 digits values?

    The other issue I have is the faintness of the box outline, which until a bidder clicks into the Qty box is very faint indeed. How do I darken the box?

    I’ve also had reports from some users that this qty box appears with up/down scrolling paddles … maybe this is the behaviour of different browsers and/or use of Mac vs Windows computers … ?

    • This topic was modified 5 years, 7 months ago by pbo999.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • AddWeb Solution

    (@addweb-solution-pvt-ltd)

    5 years, 7 months ago

    Hey @pbo999

    Please add below code in your CSS file to resolve the issue.

    .woocommerce .quantity .qty {
   width: 10rem !important;
   border: 2px solid;
}

    Hope this helps.

    Regards,

    Thread Starter pbo999

    (@pbo999)

    5 years, 7 months ago

    It does … I had already entered this code:–

    .woocommerce .quantity .qty {
    width: 8.0rem; border: 2px solid
    }

    Slightly different … so can I ask about the “!important” statement … what does this statement add/do?

    karin9nona

    (@karin9nona)

    5 years, 7 months ago

    In my chrome browser, it looks fine: I can enter six digits and have the up/down scrolling paddles.

    Try following CSS to change the width (and the border, but that also seems to be okay)

    .woocommerce .quantity .qty {
width: 7em;
border: 3px solid;
}
    Thread Starter pbo999

    (@pbo999)

    5 years, 7 months ago

    Hi karin9nona

    How it it that some see the paddles and others don’t (including me)?

    karin9nona

    (@karin9nona)

    5 years, 7 months ago

    Hello pbo999

    They only appear with a hover or when I click in the box.
    Could be the browser, could be the theme… Try the Storefront theme to see if you have the same issue.

    (When you use !important in CSS, the rule overrides all other rules for that selector.)

    Thread Starter pbo999

    (@pbo999)

    5 years, 7 months ago

    Thanks again karin9nona

    so I’ve settled on:-

    .woocommerce .quantity .qty {
    width: 10em; border: 2px solid
    }

    Thread Starter pbo999

    (@pbo999)

    5 years, 7 months ago

    Sincere thanks to the following site members who assisted me in this query. I have done some testing and have acheieved exactly the result I want (apart from some users still seeing the paddles and some not lol, but that’s a mystery I can live with)

    AddWeb Solution Pvt. Ltd.
    karin9nona

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Quantity box needs to be wider’ is closed to new replies.