Wider cart icon causing horizontal scrolling in mobile

stribley · ‎02-01-2024

A new cart icon was added to this site, which initially caused the cart bubble to be misaligned, when a product was added to it. I was able to fix the bubble, but this new icon also causes some slight horizontal scrolling in mobile due to its width, too, when an item is added, which pushes the number off-screen. Is there somewhere I can change the padding or a setting to make everything fit? I can't seem to find that. Or should I advise removing the icon and replacing it with an icon of the original width? Thanks for any guidance!

site: https://annamuseo.com/ - Dawn theme

Dan-From-Ryviu · ‎02-02-2024

Hi @stribley

Please add this code to theme.liquid file after <head> in Online Store > Themes > Edit code to solve this issue.

<style>
html, body { overflow-x: hidden; } 
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

stribley · ‎02-02-2024

Thanks. This does prevent the horizontal scrolling but, unfortunately, it also cuts off the icon and the number bubble so it can't be seen.

Wider cart icon causing horizontal scrolling in mobile

Wider cart icon causing horizontal scrolling in mobile

Community Blog Articles