Breadcrumb CSS bug on mobile causes huge page width and breaks footer

[brunocrosier]

have a look at this video. running freshly installed storefront 2.0 theme.

https://vincentius.tinytake.com/sf/NTg1NjExXzI5NTQ3OTE

you can see that the page width is way too big, which is causing the footer to break.

managed to find that it's due to some CSS typos in the breadcrumb area. as you can see, display:none; temporarily fixes the issue.

a complete fix would be to replace:

.woocommerce-breadcrumb { margin-left: -999em; margin-right: -999em; margin-bottom: 1.618em; font-size: .857em; padding: 1em 999em; }

with

.woocommerce-breadcrumb { margin-left: -.999em; margin-right: -.999em; margin-bottom: 1.618em; font-size: .857em; padding: 1em .999em; }

in this file: /storefront/assets/sass/woocommerce/woocommerce.css?ver=4.4.2

[jameskoster]

I'm not seeing that issue: https://cloudup.com/cixI8Zvnf7G

Do you have any other plugins active that might affect this?

Having said that, there's no need to be so aggressive with the negative margins on handheld devices so I'll change that.

[jameskoster]

Give that a try @brunocrosier

[BurlesonBrad]

ping again for @brunocrosier
Did this fix it? It looks fine on my Galaxy phone and tablet. Are you still seeing it?

[brunocrosier]

have installed beta 2 and it's working now @BurlesonBrad @jameskoster !

PS if youre interested in taking a look at our development usage, head to http://staging.vincentius.com/store/

we are running a child theme with quite a few changes, happy to share any code if it's of any use, just let me know. cheers and keep up the good work!

[brunocrosier]

(please note we are only going to be using Storefront on mobile, so make sure to view it at under 768px width)