Mobile Responsive Cart in Woo Commerce

[definemedia]

Hi there,

I have been working on a Woo Commerce integration into the Lifestyle theme and have it working now. Just checking through and tweaking the cart and have notice it is not working at the smaller screen size, it seems to push everything into a narrow column on the left.

Can anyone help with resolving this ?

Its probably something straightforward but i can't for the life of me find the solutions.

Any help very much appreciated.

Maria

http://testing.yoganook.com.au/cart/

[carasmo]

You have:

/* Line 407 */
th, td
{
  text-align: left;
  width: 33%;
}

These are global properties which will apply when there is a td or th everywhere, you need to use CSS specificity. Example:

.parent-table .th, 
.parent-table td {
    ... 
}

---

Genesis Theme Customization and Help

[carasmo]

https://css-tricks.com/specifics-on-css-specificity/

---

Genesis Theme Customization and Help

[definemedia]

Thank you very much for your help and setting me on the right path, have been working on this for quite a while now and am some of the way there !

.woocommerce table.shop_table td, .woocommerce table.shop_table th

{
width: 100%;
}

This corrects the responsive table, but also throws out this page now http://testing.yoganook.com.au/my-account/

I can't for the life of me find something that is specific to just the responsive table.

I thought this would work, but it doesn't have any effect

.shop_table shop_table_responsive cart td, .shop_table shop_table_responsive cart th

{
width: 100%;
}

Are there any more pointers you could give me for this, maybe I am missing something really obvious.

Many thanks,
Maria

[carasmo]

If you use th and td and make them 33%, this it will happen everywhere in your site where there is a td or a th. Where do you need 33%? Find precisely that element and get the class of that of that particular table and write your CSS for that specifically. Generally you don't need to touch any woocommerce css styles as they come with the theme. So remove what you have above.

Specifics on CSS Specificity

---

Genesis Theme Customization and Help

[Author]

Posts