Hi, I’ve been having this issue and have been trying to solve it myself, to no avail. Here goes, the icons in the mobile menu suddenly become unaligned when on the Checkout page. The cart went to the left. Follow the steps below to see the issue I’m talking about:
1. Go to Wishlist: https://tangankraf.com/wishlist/
2. Add an item or two in the cart.
3. Go to the cart logo on your top right, click Checkout.
4. This is where the issue happens. Make sure you’re viewing it on mobile. Here’s the Checkout page: (https://tangankraf.com/checkout).
5. The icons look fine until you try to scroll down and up the page. Stick and non-sticky. Please try to scroll down and up. That’s when it happens. The cart goes to the left. Here’s the screenshot: https://imgur.com/a/5tI5UrN
6. Let me know how to edit this icon and stop this icon from misbehaving. The issue happens both when I’m signed in as admin and when I’m not.
7. Thank you for reading. Hope you guys can help me out. Thank you for reading. Looking forward to your help.
Best,
Adi
Hello,
Please let me know if you edit the checkout page with tagDiv Composer and select the viewport for phone, and check if the header is changing.
Also, did you add some custom code css for cart?
Thank you!
Hi Anamaria,
Like all other pages on the website, I edited the checkout page along with its header using tagDiv Composer. I love tagDiv Composer! Yes, I took note of all viewing sizes when editing them.
Yes, I did edit them with Viewport for Phone in mind. All viewing sizes in fact. That said, no other pages on the website are having this issue. Except for that checkout page. And that baffles me.
No custom code CSS was added. I don’t know how to write and edit a line of CSS.
Also, I’ve already checked with my hosting provider, Cloudways. The support Team at Cloudways said it wasn’t a cache issue as well.
Writing here and asking for help is a last resort. I’ve been trying to solve this issue myself for days. To no avail. Looking forward to your help.
Best,
Adi
Hello Adi!
There is a mobile sticky header, which I guess should be edited. Please follow the video to see where you can find and build your sticky header on mobile and desktop too: https://www.screencast.com/t/l6v2Belt
Make sure you use the same header template. Examine the Website Manager.
Thank you!
Hi Bettina,
Thanks for the reply. Been there and done that. Hundreds of times. Here’s a screenshot: https://imgur.com/a/ccjK0WD
Looks totally fine in the editing mode. But once edited. Saved. And viewed. It still happens. The cart goes to the left. Try to scroll up and down to see the issue in action. Here’s a screenshot. Circled in red: https://imgur.com/a/xu90W08
In my previous reply, I mentioned these steps that one can follow to see the issue in action. You may follow these steps to see the issue I’m talking about.
1. Go to Wishlist: https://tangankraf.com/wishlist/
2. Add an item or two to the cart.
3. Go to the cart logo on your top right, and click Checkout.
4. This is where the issue happens. Make sure you’re viewing it on mobile. Here’s the Checkout page: (https://tangankraf.com/checkout).
5. The icons look fine until you try to scroll down and up the page. Stick and non-sticky. Please try to scroll down and up. That’s when it happens. The cart goes to the left. Here’s the screenshot: https://imgur.com/a/5tI5UrN
6. Let me know how to edit this icon and stop this icon from misbehaving. The issue happens both when I’m signed in as admin and when I’m not.
Best,
Adi
Hello Adi!
We can take a look at this and investigate why it is not working for you. Contact us via email at contact@tagdiv.com and provide the following:
– admin url and credentials
– a link to this topic in order to identify you
Thank you!
