Quantity Field Minimal width on mobile

Start
Prev
1
Next
End

szwart
Topic Author
Offline

Posts: 26
Thank you received: 1
Hikashop Business

3 years 5 months ago #336043

-- url of the page with the problem -- : houtvanappel.nl/index.php/hikashop-categ...aarpot-vrachtwagen-a
-- HikaShop version -- : 4.2.2
-- Joomla version -- : 3.10.2
-- PHP version -- : 7.3.18
-- Browser(s) name and version -- : Chrome

Hi,

On mobile view my quantity field is to small.
how can i set a minimal width or a fixed with in the frontend css?
been searching long but cannot find the solution.

this occurs on the cart and product view.

Chart pc view

Chart mobile view

Product pc view

Product mobile view

Attachments:

Please Log in or Create an account to join the conversation.

Philip
Offline

Posts: 4816
Thank you received: 654
MODERATOR

3 years 5 months ago #336048

Hello,

First of all, have a look on this tutorial to learn how to add custom css.

And second, your issue come from these css commands, have a look on my screenshot :

Now in order to answer your question, you can add this kind of commands :

// For ALL screen size
.YOUR_REQUIRED_CONTEXT_HTML input[type="number"] {
    min-width: XXpx !important;
}
// For SMALL screen size (here: 600 px width)
@media only screen and (max-width: 600px) {
    .YOUR_REQUIRED_CONTEXT_HTML input[type="number"] {
        min-width: YYpx !important;
    }
}

.YOUR_REQUIRED_CONTEXT_HTML input[type="number"] {
    padding: 2px 5px !important;
}

The ".YOUR_REQUIRED_CONTEXT_HTML" is your context in order to apply your new command when required.

Note : the "!important" is to be sure to prioritize your custom commands over the unwanted command.
Hope this will help you to achieved your needs.

Regards

Last edit: 3 years 5 months ago by Philip.

Please Log in or Create an account to join the conversation.

szwart
Topic Author
Offline

Posts: 26
Thank you received: 1
Hikashop Business

3 years 5 months ago #336060

Hi Philip,

Thank you for your comment.
i tried following code, but unsuccesfull.

edited this in the frontend.css

// For SMALL screen size (here: 600 px width)
@media only screen and (max-width: 600px) {
.hikashop_product_quantity_field input[type="number"] {
min-width: 15px !important;
}

what am i doing wrong...

Please Log in or Create an account to join the conversation.