Fixing Mobile Horizontal Scroll & Cart Drawer Clipping in Shopify's Reformation Theme

Hey everyone, as a Shopify migration expert, I spend a lot of time sifting through community discussions, and every now and then, a thread pops up that’s just gold. It showcases real-world problems and brilliant, collaborative solutions. Today, I want to unpack a recent discussion around a common, yet frustrating, issue: unexpected horizontal scrolling on mobile, specifically with the Reformation theme, and a related cart drawer clipping problem.

The "Urgent" Mobile Display Challenge

Our community member, siva_fds, brought up an "urgent" concern. They were seeing an annoying horizontal scroll on their product and collection pages when viewed on mobile, plus a "You may also like" heading in their cart drawer that was getting cut off. These kinds of display issues can really hurt user experience and even impact conversions, so getting them sorted quickly is key.

When tackling mobile display bugs, the first step is always diagnosis. DanielAnderson offered a fantastic initial tip: temporarily add

overflow-x: hidden;

to your main page wrapper. This acts as a quick test to see if the problem disappears, helping you pinpoint which section might be the culprit. Common offenders, as Daniel pointed out, often include newly added sections like recommended products, cart drawer content, or custom CSS rules that might use

width: 100vw

or excessive padding.

Unraveling the Cart Drawer Clipping Mystery

Now, let's dive into the specifics of siva_fds's store, Cordori.com.au. It turns out the cart drawer issue was a classic case of custom CSS clashing with theme defaults. Ploqo, another sharp community member, dug deep and found the root cause. Siva had a custom CSS rule in their Theme settings > Custom CSS:

.side-panel-content {padding: 10px;}

.

This seemingly innocent rule was causing a conflict because the Reformation theme's "You may also like" block is designed to break out of the default 30px drawer padding. It uses

width: calc(100% + 60px)

and

margin-left: -30px

to achieve that full-width look. When siva changed the padding to 10px, the block ended up 20px wider on each side than the drawer, leading to the clipping. Ouch!

The Cart Drawer Fix: Custom CSS Override

Ploqo provided a precise fix, adding this custom CSS right below the existing

.side-panel-content {padding: 10px;}

rule:

@media (max-width: 1067px) {
  .cart-drawer .cart-drawer--recommendations--container {
    width: auto;
    margin-left: -10px;
    margin-right: -10px;
  }
}

This snippet cleverly overrides the theme's default behavior specifically for the cart drawer recommendations only on smaller screens (up to 1067px). Notice how the

-10px

values for margin-left and margin-right perfectly match the custom

10px

padding. If you ever change your

.side-panel-content

padding, remember to update these values too! Ploqo even shared helpful screenshots, showing the clipped heading before the fix: and the perfectly aligned block after: .

While Laza_Binaery suggested a fix involving modifying the

assets/app.css

file directly, Ploqo's approach of using the Theme settings > Custom CSS box is generally safer. Directly editing theme files can make updates harder down the line, whereas the Custom CSS box is designed for these kinds of overrides.

Conquering the Product Page Horizontal Scroll

Next up, that pesky horizontal scroll on the product page. Initially, Laza_Binaery suggested using

overflow: hidden;

on the

.product-recommendations.product-recommendations--loaded

class. While this hides the scroll, it doesn't address the underlying cause of the overflow. Ploqo identified that the recommendations row on the product page was actually 403px wide inside a 373px section on mobile, causing the overflow.

The Product Page Fix: Resizing Recommendations

To truly remove the horizontal scroll at its source, Ploqo provided this elegant solution, again to be added to your Theme settings > Custom CSS:

@media (max-width: 767px) {
  .product-recommendations.swipe-on-mobile .products.row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

This CSS snippet ensures that the product recommendations row correctly fits within its container on mobile devices (up to 767px), making that horizontal scroll disappear while still keeping the swipe carousel functionality intact. Once this is in place, you can remove any temporary

overflow: hidden;

rules you might have added.

Important Distinctions & Best Practices

It's also worth noting what isn't broken. Ploqo correctly pointed out that the "30-day Exchanges and Returns - Dispatch within 24 hours" strip is a scrolling marquee by design, meant to run past the edges. Similarly, if you see a second product peeking off the right edge of a recommendations section, that's likely a swipeable carousel, not a bug – just swipe it!

This thread is a perfect example of how crucial attention to detail and understanding CSS specificity can be in Shopify theme customization. What might seem like a small custom padding change can ripple through your design and cause unexpected issues, especially on mobile. Regularly testing your store on various devices is always a good practice. If you're building out a new store or migrating to Shopify, remember that a solid foundation and careful customization are key to a smooth user experience. Don't be afraid to lean on the vibrant Shopify community or consult with an expert when these tricky CSS conflicts arise. Keeping your mobile experience flawless is non-negotiable in today's ecommerce landscape!