+ / - buttons in Cart not displaying in mobile - Support | Kriesi.at

Tagged: Cart, mobile, responsive, table

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
October 6, 2015 at 3:40 pm #514444
richardelectrix
Participant
In the mobile version of theme, the quantity +/- buttons in the shopping cart disappear. I have tried the following code to fix it, but although it makes it appear, it appears incorrectly.
```
@media only screen and (max-width: 767px) {
.responsive .shop_table .product-quantity {
  display: block;
}}
```
It messes up the shape of the table and the way that the text in the Product Name column appears.

Any idea how to fix this?

Many thanks. R
October 6, 2015 at 3:53 pm #514469

Elliott
Inactive Moderator

Hey richardelectrix!

That element is not responsive which is why it’s hidden on very small screens.

Best regards,
Elliott

October 6, 2015 at 3:55 pm #514475

richardelectrix
Participant

Okay, well then how are people supposed to change what’s on their list?

October 6, 2015 at 3:58 pm #514480

richardelectrix
Participant

And if it can’t be visible, I still have the issue with the text in the Product Name column being misaligned on mobiles. How would I fix that?

October 6, 2015 at 5:20 pm #514609

Elliott
Inactive Moderator

Hi!

The product name looks fine on my end. Take a screenshot and highlight what your seeing so we can get a better idea.

Regards,
Elliott

October 6, 2015 at 5:28 pm #514619

richardelectrix
Participant

The text should either all be left justified or all be centre justified. I’m seeing the title center, the meta left, and the sku centre.

October 7, 2015 at 11:21 am #515090

Andy
Inactive Moderator

Hey!

your last screenshot is not showing up for me. Please use imgur.com or dropbox for example.

Cheers!
Andy

October 7, 2015 at 12:27 pm #515113

richardelectrix
Participant

Try this: https://www.dropbox.com/s/fu7t9nlwx8fmb9y/Screenshot%202015-10-06%2016.25.19.png?dl=0

October 8, 2015 at 12:12 pm #515715
Andy
Inactive Moderator
Hi!

make it left justified using this code:
```
.responsive table.shop_table.cart .product-name {
text-align: left;
}
```
Best regards,
Andy
October 19, 2015 at 3:54 pm #521019
richardelectrix
Participant
I have fixed the issue and tidied up the mobile view …
```
/****************************************************************
************* Add Qty fields to Mobile cart screens *************
****************************************************************/

@media only screen and (max-width: 767px) { 
.responsive .shop_table .product-quantity {
    /* width: 76px; */
    display: block;
    min-width: 50px;
    text-align: center;
    padding-bottom: 5px;
    font-size: 11px;
}

table div.quantity {
    width: 50px;
}

.responsive #top table .product-name {
    min-width: 190px !important;
    font-size: 11px;
    padding-left: 5px;
}

.responsive table.shop_table.cart td.product-remove {
    display: none;
}

.responsive table.shop_table.cart .product-remove {
    display: none;
}

/* div table.shop_table td {
    min-height: 120px;
} */

.cart td {
    border-style: none none none none;
}

.cart th {
    border-style: none none none none;
}

.cart table {
    border-collapse: inherit;
}

.responsive #top table .product-name {
    border-left-style: none;
}

tr th:first-child, tr td:first-child {
    border-left-style: none;
}

tr:first-child th, tr:first-child td {
    border-top-style: none;
}

}

/* Individual control of the Plus and Minus buttons */
@media only screen and (max-width: 767px) { 
#top .main_color .quantity input.minus {
    display: none;
}

#top .main_color .quantity input.plus {
    display: none;
}}
```
October 20, 2015 at 12:05 pm #521524

Andy
Inactive Moderator

Hi!

glad you could fix it. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

Regards,
Andy

April 6, 2016 at 6:21 am #608677

taliwalt
Participant

@richardelectrix – Thanks for sharing your code. Works perfectly

@support staff – The answer really should have come from you. It’s not too much to ask for people to see the quantity of items they are ordering on a mobile device.
Author

Posts