Woocommerce cart CSS for small viewport

[websitefreedomMember]

Hi,
The child theme looks generally good but the when viewing the cart (viewed on a phone) it doesn’t fit within the container.
Thanks
David

[SpenceMember]

Hi David,
we’ve made some changes to the default Responsive layout so now images show only one across in the mobile browser size. Have a look here

https://img.skitch.com/20120523-g978i8hpwybafm81ss3m1t7jjq.jpg

[websitefreedomMember]

Hi,
Thanks! Looks good Should I download the child theme again?
David

[websitefreedomMember]

Hi,
So what do I do to fix my View the cart problem please?
Thanks

[SpenceMember]

Can I get your site URL? What part of the cart layout do you prefer modified?

[websitefreedomMember]

Hi,
The site is just in a test subdomain at the moment. The url is…

http://aireshelta.squirrelhouse.biz/products/

1. view on a small viewport
2. put the product in the cart
3. view the cart – you see the cart extends outside of the container!

[websitefreedomMember]

Hi,

I’ve taken a screenshot of the problem…

http://aireshelta.squirrelhouse.biz/wp-content/uploads/2012/06/view_cart_problem.jpg

You can see the cart table overflows the container DIV

[SpenceMember]

We have a theme update coming tomorrow, to match the latest update of the Responsive parent. But till then, add this to your child-theme.css within the media query for 480px or less.

[code]
.cart-collaterals .cart_totals, .cart-collaterals .shipping_calculator, .cart-collaterals .cross-sells {
    width: 100%;
}

table.shop_table {
    font-size: 9px;
    line-height: 1em;
}

[/code]

[websitefreedomMember]

Thanks. I see how you’re tackling it and will probably do some work on the buttons as well

Good luck with the new release!

[websitefreedomMember]

Hi,

I can’t see a new release yet – I’m on 1.6.3 at the moment.

Your fix above still doesn’t work well unfortunately for viewports smaller than 768px. The Woocommerce View Cart spills outside of the div container. I’ve used Matt Kersley’s Responsive Design Tester to show you how it looks in the link…

http://aireshelta.squirrelhouse.biz/images/woocommerce-view-cart-problems-14Jun2012.jpg

Thanks

David

[Author]

Posts