Shopingcart not responsive

Some help?

Please help us...

On a mobile phone, portrait mode, the cart table is not responsive. In Themler Desktop, Phone mode, it has a horizontal scroll bar. Also the product images are not responsive in the table.
In Themler I have tried setting the Display to Block for the Cart Table and Table with buttons, but this setting does not change anything, for a table it would normally with CSS split up the table.
Most people use a phone in portrait mode, can this be fixed please.
Thanks
LenW

Hi,

Please provide a link to your site and probably some screen shots showing the issue.

Sincerely,
Hella

www.ultimatefabrics.co.uk
Two screenshots attached. Portrait and landscape on a Samsung Galaxy S2.
The table is not responsive, and cut off in portrait mode.
The buttons could be underneath each other, the image if made smaller in portrait mode might help.
LenW

Hi,

Woocommerce outputs Shopping Cart as table. The table is not fully responsive by default. And it cannot be fully responsive. Theme only applies general table styles to the cart table and cart controls.
I can only suggest adding the following code to solve the issue with images:

.woocommerce img, .woocommerce-page img
{
max-width: 100%!important;
}

This code can be added to the Themler Settings >> Additional CSS.

Thank you,
Olivia

Yes this no-responive is a real pain (and a common complaint with woo) and even in themler there is virtually no control over the table (because as Olivia said it is a general table) so I found that you spend time getting the general table to where you like it, then use the code below as a starting point to make it play nice with in responsive mode. BE WARNED and BE PREPARED to spend a few hours with the code inspector and developer tools to get to a point where its acceptable and readable for a website user. Who knows maybe down the track this will change and life for the cart and checkout pages will become more pleasant.

Code source: https://gist.github.com/catchthemes/eec48957fbd3ed724c98

One side note IE9 does not like this much (table display as block)

/* START Make the WooCommerce Cart Table Responsive  for Mobile */
/* CSS published in http://www.jeremycarter.com.au/optimising-woocommerce-checkout-for-mobile/ */

@media screen and (max-width: 600px) {

/* Force table to not be like tables anymore */
.woocommerce-page table.shop_table, 
.woocommerce-page table.shop_table thead, 
.woocommerce-page table.shop_table tbody, 
.woocommerce-page table.shop_table th, 
.woocommerce-page table.shop_table td, 
.woocommerce-page table.shop_table tr { 
    display: block; 
}

/* Hide table headers (but not display: none;, for accessibility) */
.woocommerce-page table.shop_table thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.woocommerce-page table.shop_table tr { 
    /*border: 1px solid #d2d3d3; */
}

.woocommerce-page table.shop_table td { 
    /* Behave  like a "row" */
    border: 1px solid #d2d3d3; 
    position: relative;
    padding-left: 30% !important; 
}

.woocommerce-page table.shop_table {
    border: none;
}

.woocommerce-page table.shop_table td.product-spacer {
    border-color: #FFF;
    height: 10px;
}

.woocommerce-page table.shop_table td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

/*
Label the data
*/
.woocommerce-page table.shop_table td.product-remove:before {
    content: "DELETE";
}

.woocommerce-page table.shop_table td.product-thumbnail:before {
    content: "IMAGE";
}

.woocommerce-page table.shop_table td.product-name:before {
    content: "PRODUCT";
}

.woocommerce-page table.shop_table td.product-price:before {
    content: "PRICE";
}

.woocommerce-page table.shop_table td.product-quantity:before {
    content: "QUANTITY";
}

.woocommerce-page table.shop_table td.product-subtotal:before {
    content: "SUBTOTAL";
}

.woocommerce-page table.shop_table td.product-total:before {
    content: "TOTAL";
}

.woocommerce .quantity, 
.woocommerce #content .quantity, 
.woocommerce-page .quantity, 
.woocommerce-page #content .quantity {
    margin: 0;
}

.woocommerce-page table.cart td.actions, 
.woocommerce-page #content table.cart td.actions {
    text-align: left;
    border:0;
    padding-left: 6px !important;
}

.woocommerce-page table.cart td.actions .button.alt, 
.woocommerce-page #content table.cart td.actions .button.alt {
    float: left;
    margin-top: 10px;
}

.woocommerce-page table.cart td.actions div, 
.woocommerce-page #content table.cart td.actions div,
.woocommerce-page table.cart td.actions input, 
.woocommerce-page #content table.cart td.actions input {
    margin-bottom: 10px;
}

.woocommerce-page .cart-collaterals .cart_totals {
    float: left;
    width: 100%;
    text-align: left;
}

.woocommerce-page .cart-collaterals .cart_totals th, 
.woocommerce-page .cart-collaterals .cart_totals td {
    border:0 !important;
}

.woocommerce-page .cart-collaterals .cart_totals table tr.cart-subtotal td,
.woocommerce-page .cart-collaterals .cart_totals table tr.shipping td,
.woocommerce-page .cart-collaterals .cart_totals table tr.total td {
    padding-left: 6px !important;
}

.woocommerce-page table.shop_table tr.cart-subtotal td,
.woocommerce-page table.shop_table tr.shipping td,
.woocommerce-page table.shop_table tr.total td,
.woocommerce-page table.shop_table.order_details tfoot th,
.woocommerce-page table.shop_table.order_details tfoot td {
    padding-left: 6px !important;
    border:0 !important;
}

.woocommerce-page table.shop_table tbody {
    padding-top: 10px;
}

.woocommerce .col2-set .col-1, 
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2, 
.woocommerce-page .col2-set .col-2,
.woocommerce form .form-row-first, 
.woocommerce form .form-row-last, 
.woocommerce-page form .form-row-first, 
.woocommerce-page form .form-row-last {
    float: none;
    width: 100%;
}

.woocommerce .order_details ul, 
.woocommerce-page .order_details ul,
.woocommerce .order_details, 
.woocommerce-page .order_details {
    padding:0;
}

.woocommerce .order_details li, 
.woocommerce-page .order_details li {
    clear: left;
    margin-bottom: 10px;
    border:0;
}

}

/* END Make the WooCommerce Cart Table Responsive  for Mobile */

Last edited 29 September 2016 by joshpell

Thanks for the code, hope it will help other users.

Sincerely,
Hella

can you give me the same code for virtuemart please ???? i have the same problem

Hi,

Please provide a link to your site, attach the marked screen shots showing what you need to fix and also explain how to get to that page on your site.

Sincerely,
Hella