Ronia

Site URL: https://www.chicagochamberchoir.org/cart On my cart page, the top part of the page is partially under the header. I can use the following CSS to fix it: ___________ /* Header Background on Cart Page */ body#cart .Header { background: #ff0000; } body#cart section.Main-content { padding-top: 150px; } ___________________ However, when I add that code to the custom CSS, it seems to break the code I'm using to make the shopping cart float with the user as they navigate the page (see here). This is my current CSS; how can I get the banner spacing I need without breaking the shopping cart float? ___________________ @media only screen and (min-width: 760px) { header{position:fixed!important;z-index:9999;width:100%;-webkit-box-shadow:0px 3px 15px rgba(100,100,100,.49);-moz-box-shadow:0px 3px 15px rgba(100,100,100,.49);box-shadow:0px 3px 15px rgba(100,100,100,.49)} /* Cart */ .Cart { transition: 0.35s; } .sqs-pill-shopping-cart { display: inline !important; opacity: 0.95 !important; position: fixed; top: 110px; right: 20px; }}@media only screen and (max-width: 480px) ___________________

SITE chicagochamberchoir.org ISSUE Is specifically related to our ticketing page: chicagochamberchoir.org/single-tickets. On mobile, after adding the first item(s) to the cart, the user cannot add anything else. This issue occurs only on mobile; everything works perfectly on desktop. CUSTOM CSS I have custom code to make the shopping cart icon operate the way I'd like. I think that's what's causing the issue. Can anyone see where I've gone wrong?: --- header{position:fixed!important;z-index:9999;width:100%;-webkit-box-shadow:0px 3px 15px rgba(100,100,100,.49);-moz-box-shadow:0px 3px 15px rgba(100,100,100,.49);box-shadow:0px 3px 15px rgba(100,100,100,.49)} /* Cart */ .Cart { transition: 0.35s; } .sqs-pill-shopping-cart { display: inline !important; opacity: 0.95 !important; position: fixed; top: 110px; right: 20px; } ---