horizon theme

[eren32e42]

Hello, I want to use the new Horizan theme on Shopify, but I'm having a problem. When I edit the theme, everything looks fine when I view the page with all the products, and there are no problems when I view it on a computer or mobile device, but when I access it from my phone or a friend's phone, the page with all the products and the collections page appear cut off. Is there a solution to this problem?

[Moeed]

Hey @eren32e42 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[devcoders]

Hello @eren32e42 

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

[Denishamakwana]

Hi,

Good morning,

Welcome to the shopify ,

Please share your store URL and if your store is password protected then also provide password too.
Thank you.

[Vi-WizzCommerce]

Hello @eren32e42 !

Thanks for the info and screenshots — if your Horizon theme collection or product pages look fine in the editor but appear cut off on real phones, this usually points to CSS layout issues (e.g. overflow, fixed widths, or image ratios) not visible in the Shopify editor preview.

🔧 Quick Fix You Can Try:

A. Add Safe Overflow Handling via CSS

In Online Store > Customize > Theme settings > Custom CSS, add this:

* {
box-sizing: border-box;
}

body {
overflow-x: hidden;
}

.grid,
.collection,
.product-grid,
.collection-grid {
max-width: 100%;
overflow-x: hidden;
}

.collection__item,
.product-card {
max-width: 100%;
word-break: break-word;
}

B. Check Image Settings (Theme Editor)

1. Go to Customize.

2. On your collection list or featured collection, check if there’s an image ratio setting (like “natural”, “square”, etc.).

3. Try switching to:

   • Square for a more uniform layout.

   • Crop center or “contain” instead of “cover”.

 

C. Temporarily Disable Custom Code or Apps

If you've added any custom code (e.g., JavaScript for sliders or apps for upsells), try disabling/removing it and rechecking the layout.

Bonus Debug Step

If you want to pinpoint the issue, open your phone browser (Safari or Chrome):

1. Go to the problem page.

2. Tap the URL bar → type view-source: before the URL (in some browsers).

3. Check if any div, img, or container has widths like 100vw, 500px, etc. — this is often the culprit.

If this reply was useful to you, we would really appreciate it if you gave us a LIKE and mark the issue as SOLVED!