Why do mobile and desktop cart pages display differently?

Store Design
, ,
1

I added a couple dropdowns to my cart page and they look fine on desktop, but on mobile one of the dropdowns and the cart notes section are below the checkout button. Is there a way to fix this??

Desktop
Desktop2548×1618 186 KB

Mobile
Mobile970×1634 85.8 KB

2

Hi Breebree
Can you share your store URL so I can check what causing this issue?

3

Hello @breebree

Please give me your Store URL so I can check it

Kind & Best regards,
GemPages Support Team

4

www.nanijewelry.com

Thank you!

5

Hi @breebree

Please add this CSS code to the bottom of theme.css file it will fix he issue

@media only screen and (max-width: 767px) {
.template__cart__footer {
display: block;
}
}

to find theme.css file click on
online store—>Edit theme code https://prnt.sc/R5Aa-ZWUKOAN
Search “theme.css” and add the above code https://prnt.sc/DJ87r-zEiax6

Let me know if you need any further help to add the code

6

I have another question if you’re able to help! I’d like the responses from those dropdown questions to show up on my packing slips – right now it only shows my “order notes.”

7

Hi @breebree

I need your store access to edit your packing slip template so we can use order note in that
Please check documentation link for that
Packing slip variable reference · Shopify Help Center

If you are ok to provide access, I can make the changes.

8

Hi!

I can actually go in if you could please let me know the variable?

Thank you for your help!

9

Hi @breebree

You can use {{order.note}} variable like this https://prnt.sc/c_GEpOiGsXa3


     

**Order Note**
{{order.note}}