• 0
Sign in to follow this  
Followers 0

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


Question

Posted (edited) · Report post

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 :)

Edited by Toby
1 person likes this

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

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;
}
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm sorry I forgot i had that up.

It is live now, thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

 

Any ideas?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok, I will contact them thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks, let us know what they suggest.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for sharing, we appreciate it.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0