Hi @Bodwa
I see why two cart elements here works perfectly, the site looks great!
So the issue here is that you can’t change the displaySetting of the Cart Element.
A workaround for this is to add the mobile cart element inside a divWrapper. Then on desktop and tablet you can give the divWrapper a setting of Display: None and on landscape and mobile a setting of Display: Block. The wrapper becomes the new parent of the cart element and all its children.
Now, when you Add to Cart only the relevant cart is displayed, based on the media query you’re in.
You have this kind of set up already the other way round, because you’re hiding the parent container (blackheader) that the desktop cart sits in.
Here’s a quick video (no sound) to show you.
If you get stuck at all, please don’t hesitate to reach out.