Hey There! I’ve got 2 cart modal windows showing up when I push my add to cart button. This is because I’m styling two different cart elements on my site. one for Desktop and one for mobile… I can’t seem to “hide” the div that holds the whole cart for desktop view and vice versa for mobile… is there not an option for me to have two cart Elements on the site?
1 Like
Hey @Bodwa 
I’m just wondering why you’re using two different cart elements?
It’s possible to style the same element to appear differently for all Media Queries: Desktop > Tablet > Mobile Landscape > Mobile.
I don’t want to explain too much in the fear of patronising you in case you already know this, but if you could share your read only link I’d be happy to take a look and possibly explain further. 
1 Like
Hey @magicmark! Thanks for taking some thoughts at this : )
Here’s may share link. I didn’t think I needed it, but now I see why I would based on your question:
To explain, I have the cart elements in two different divs in the nav… which is why I thought I would need to have two different cart elements… you’ll see when the site breaks down to mobile, I’m hiding the black bar entirely (the cart element goes with it) then in mobile, the placement of that cart button is in a different part of the nav in a different div. Similar to when you sometimes need to design a whole different design for mobile navigation I thought this was a similar situation. If I need to, I can probably figure out a way in the design to move the cart in the main nav there, but if it’s possible to hide it… then I would probably prefer to keep the two if I can do that.
Let me know if this changes your thoughts at all on my situation.
-Bodie
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.
1 Like
@magicmark. Fantastic Explanation and video. That explains and does just what I need it to do! Glad that I can put that in a div and hide that. That was def something I didn’t think of. Thank you so much for your great help there!
1 Like