Hide Amazon Cart Using userContent.css

Question

I'm trying to hide the Amazon cart (the "panel" on the right hand side). It makes Christmas shopping for your family more challenging.

I thought I could put something like this in my userContent.css;

@-moz-document domain(amazon.com) {
    #nav-flyout-ewc { display: none !important; }
}

But so far I'm not having much luck.

I'm using Firefox:

Version 82.0.2
Build ID 20201027185343
Distribution ID canonical

And the userContent.css is in the "chrome" folder in my Profile Directory as reported by about:support

Answer 1

I've taken a bit of a dive trying to sort this out myself and (like you) wasn't satisfied with just blanket bombing the body. Here's my solution ( which in the process of finding, helped me realise I didn't have to do it for the subdomain ' smile. ', too ):

@-moz-document domain(amazon.co.uk) {
    #nav-flyout-ewc { display:none !important; }
    .nav-ewc-persistent-hover.a-js body { padding-right: 0px !important; }
    .nav-ewc-persistent-hover body { padding-right: 0px !important; }
}

You would obviously just change this to ' .com ' or, if you wish to affect multiple sites, then, this:

@-moz-document domain(amazon.com), domain(amazon.co.uk) {
    #nav-flyout-ewc { display:none !important; }
    .nav-ewc-persistent-hover.a-js body { padding-right: 0px !important; }
    .nav-ewc-persistent-hover body { padding-right: 0px !important; }
}