MOBILE VERSION (SCROLL)

From the phone, the shopping cart table does not show the entire cart and customers need to scroll to see what's in their cart... etc.. Is there any way to make this table show 100% rather than the scroll feature. It definitely takes away from the beauty of the site. I chose to go into the mobile.css file and noticed that the width is set at 100% but scrolls anyways. Please advise

http://www.Pinkchella.com

Hi

This is a standard solution used for tables nowadays and it's provided by Virtuemart directly. The only solution I can think of is to remove some of the columns, so it may fix to the mobile screen width.

Code: Select all

@media only screen and (max-width:686px) {
.cart-summary > tbody > tr > th:nth-child(4),
.cart-summary > tbody > tr > td:nth-child(4) {
display: none;
}
}


the above example will remove column 4th, You may try to remove some more too.

Hi

This is a standard solution used for tables nowadays and it's provided by Virtuemart directly. The only solution I can think of is to remove some of the columns, so it may fix to the mobile screen width.

Code: Select all

@media only screen and (max-width:686px) {
.cart-summary > tbody > tr > th:nth-child(4),
.cart-summary > tbody > tr > td:nth-child(4) {
display: none;
}
}


the above example will remove column 4th, You may try to remove some more too.

where does this go?

Hi

This is just an example how to remove 4th column in cart on mobile. You can add more to reduce the space taken by it. Best file will be override.css but make sure override is enabled in template settings.

Hi

This is just an example how to remove 4th column in cart on mobile. You can add more to reduce the space taken by it. Best file will be override.css but make sure override is enabled in template settings.

Did not change the table. I added this to override.css and enabled overrides in template manager.

Hi

What device was this screenshot made with ? I cannot reproduce this partial display on any of my devices.

Anyway try using this code:

Code: Select all

@media only screen and (max-width:600px) {
#gkMainbody table::before {
display: none;
}

#gkMainbody fieldset {
    width: 100% !Important;
}
}


Hi

What device was this screenshot made with ? I cannot reproduce this partial display on any of my devices.

Anyway try using this code:

Code: Select all

@media only screen and (max-width:600px) {
#gkMainbody table::before {
display: none;
}

#gkMainbody fieldset {
    width: 100% !Important;
}
}


iPhone 6s Plus

Hi

What device was this screenshot made with ? I cannot reproduce this partial display on any of my devices.

Anyway try using this code:

Code: Select all

@media only screen and (max-width:600px) {
#gkMainbody table::before {
display: none;
}

#gkMainbody fieldset {
    width: 100% !Important;
}
}


This worked perfectly! I don't know you, but I love you !!!!

Hi


Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro