Jump to content


Photo
- - - - -

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

jigoshop mobile responsive table form

Best Answer Toby , 02 December 2013 - 06:21 AM

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;
}
}
Go to the full post


  • Please log in to reply
11 replies to this topic

#1 Toby

Toby

    Advanced Member

  • Members
  • PipPipPip
  • 65 posts
  • Framework Version:1.0.1
  • Country: Country Flag

Posted 29 November 2013 - 11:46 AM

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, 29 November 2013 - 11:48 AM.

  • LooreseentWef likes this

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16561 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 November 2013 - 11:49 AM

Hi,

 

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



#3 Toby

Toby

    Advanced Member

  • Members
  • PipPipPip
  • 65 posts
  • Framework Version:1.0.1
  • Country: Country Flag

Posted 29 November 2013 - 11:51 AM

I'm sorry I forgot i had that up.

It is live now, thanks



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16561 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 November 2013 - 11:58 AM

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.



#5 Toby

Toby

    Advanced Member

  • Members
  • PipPipPip
  • 65 posts
  • Framework Version:1.0.1
  • Country: Country Flag

Posted 29 November 2013 - 12:06 PM

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.



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 16561 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 November 2013 - 12:20 PM

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.



#7 Toby

Toby

    Advanced Member

  • Members
  • PipPipPip
  • 65 posts
  • Framework Version:1.0.1
  • Country: Country Flag

Posted 01 December 2013 - 10:12 AM

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

 

Any ideas?



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 16561 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 01 December 2013 - 10:37 AM

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



#9 Toby

Toby

    Advanced Member

  • Members
  • PipPipPip
  • 65 posts
  • Framework Version:1.0.1
  • Country: Country Flag

Posted 01 December 2013 - 10:38 AM

Ok, I will contact them thanks



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 16561 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 01 December 2013 - 09:02 PM

Thanks, let us know what they suggest.



#11 Toby

Toby

    Advanced Member

  • Members
  • PipPipPip
  • 65 posts
  • Framework Version:1.0.1
  • Country: Country Flag

Posted 02 December 2013 - 06:21 AM   Best Answer

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


#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 16561 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 02 December 2013 - 12:10 PM

Thanks for sharing, we appreciate it.







Also tagged with one or more of these keywords: jigoshop, mobile, responsive, table, form