Jigoshop (forms and tables) not working with Responsive/Mobile View

[Toby 2]

Hi, I am working with Jigoshop and I have noticed that the table and forms do not play well with the 'responsive' element of DMS.

 

Here is what my cart looks like on iPhones (the white is off screen.)

 

http://postimg.org/image/px076xtfn/

 

Here is how the checkout form is displayed on iPhones

 

http://postimg.org/image/v5eorce2h/

 

 

If you would like to see the CSS or check the code here is the link:

 

www.recomatt.com.au

 

 

Thanks in advance for the help :)

[Danny+ 1,327]

Hi,

 

Your site is protected, we're unable to see the site, can you remove this so we can take a look please.

[Toby 2]

I'm sorry I forgot i had that up.

It is live now, thanks

[Danny+ 1,327]

OK, so the table CSS is being loaded from JIgoshops own stylesheet. Therefore, you will need to consult them on this issue. Alternatively, you could replace JigoShop with WooCommerce, which is full responsive to my knowledge, we use it on the PageLines shop.

[Toby 2]

Thanks, is there a way to overwrite the Jigoshop CSS for the tables, and apply DMS table CSS instead?

 

Also if i were to swap to Woo commerce would my CSS styling stay intact for the store, not sure if they are built on the same model.

[Danny+ 1,327]

WooCommerce is JigoShop, WooThemes forked JigoShop to create WooCommerce. However, I am not entirely sure if your CSS would effect WooCommerce the same way it did JigoShop.

[Toby 2]

Ok, so I have installed WooCommerce but the table problem still stands.

 

Any ideas?

[Danny+ 1,327]

Yes, you will need to contact WooCommerce support, the CSS being used is the plugins. Therefore, the issue is related to WooCommerce.

[Toby 2]

Ok, I will contact them thanks

[Danny+ 1,327]

Thanks, let us know what they suggest.

[Toby 2]

I searched their forums and applied some CSS to fix the problem.

 

I used @media to adjust the look of the table on mobiles, removing the thumbnail column, and reducing the font size and padding.

 

Here is the code i used if anyone needs it.

 

/*Reduces font size*/
@media (max-width: 400px){
.woocommerce table.shop_table, .woocommerce-page table.shop_table {
font-size: 10px;
}
}

/*Removes thumbnail column*/
@media (max-width: 480px) and (min-width: 320px) and (orientation: portrait) {
.woocommerce table.cart .product-thumbnail, .woocommerce #content table.cart .product-thumbnail, .woocommerce-page table.cart .product-thumbnail, .woocommerce-page #content table.cart .product-thumbnail {
display: none;
}
}

/*Reduces padding*/
@media (max-width: 480px) and (min-width: 320px) and (orientation: portrait) {
.woocommerce table.cart th, .woocommerce table.cart td, .woocommerce #content table.cart th, .woocommerce #content table.cart td, .woocommerce-page table.cart th, .woocommerce-page table.cart td, .woocommerce-page #content table.cart th, .woocommerce-page #content table.cart td {
padding: 10px;
}
}

[Danny+ 1,327]

Thanks for sharing, we appreciate it.