Mobile view Overlapping issue

Technical Q&A
, ,

Topic summary

Main issue: On mobile, the Shopify store shows horizontal scrolling/negative space, with “Add to cart” and “Buy now” buttons overflowing to the right. Desktop view is fine.

Steps taken:

  • Added CSS in base.css to hide horizontal overflow (html { overflow-x: hidden; }). No improvement on mobile; buttons still overflow.
  • Replaced with a mobile-specific CSS rule (for screens ≤500px) setting .collection .quick-add.no-js-hidden margins to 0. Applied at the bottom of base.css; issue persists, layout still uneven and buttons overflow.

Latest update:

  • A responder states it “works fine” and provides a screenshot of the add-to-cart button as proof. The original reporter still observes the problem on their device.

Outcome/status:

  • No confirmed resolution. Conflicting reports between the suggested fix appearing correct in a screenshot and the ongoing issue on the reporter’s mobile view.
  • Key open question: what element is causing the mobile overflow since the provided CSS changes did not resolve it. An image attachment is central to the latest claim of success.
Summarized with AI on December 13. AI used: gpt-5.
2

Hello @Luis809 ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code at the bottom:

html {
    overflow-x: hidden;
}

If problem solved don’t forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services

You can find the email in the signature below.

Thanks