Solving the Mobile Mystery: Shopify Horizon Theme & Product Media Corner Radii

Hey there, fellow store owners! As someone who spends a lot of time digging through the Shopify community forums, I often come across those little design quirks that can drive you absolutely nuts. You know, the ones where something looks perfect on desktop, but then you check your phone, and it's just... off. Today, I want to talk about a recent discussion that perfectly illustrates this, focusing on product media corner radii in the popular Horizon family themes.

It all started with a post from @omoot1, who was wrestling with a common head-scratcher: their carefully set product media corner radius was showing up beautifully on desktop, but completely disappearing on mobile for their product pages. They'd tried everything – padding, different settings – but couldn't get those smooth, rounded edges to appear on smaller screens.

The Mobile Corner Radius Conundrum on Horizon Themes

This isn't an uncommon scenario. Many of us invest time in perfecting our store's look and feel, and mobile responsiveness is non-negotiable these days. When a design element, especially something as fundamental as image styling, behaves differently across devices, it can be frustrating. @omoot1 specifically mentioned using the Horizon theme, which, as it turns out, has a particular characteristic when it comes to rounding media corners on mobile.

The community quickly jumped in to help, which is what I love most about these forums. @Moeed and @SectionKit both asked for the store URL and password, which is always the first, best step for debugging visual issues. They need to see it in action to properly diagnose. @SectionKit even shared a screenshot of the official Horizon theme demo, pointing out that by default, it doesn't have a border radius on product media:

This context is important: if you're seeing a border radius, it means you've likely added it via the theme customizer or some custom code. The problem then becomes why it's not consistently applied on mobile.

The Simple CSS Fix for Mobile Corner Radii

Thankfully, @tim_tairli swooped in with a very concise and effective solution. It seems that while the Horizon family themes can have rounded media corners, they sometimes just don't apply that setting correctly on mobile devices without a little nudge. The fix involves adding a small snippet of CSS to explicitly tell the theme to apply the set radius.

Here's the code that @tim_tairli shared:

.product-media-container {
  --corner-radius: var(--media-radius);
}

What this CSS does is target the .product-media-container – that's the element holding your product images and videos – and explicitly sets its --corner-radius custom property to inherit the value from another theme variable, --media-radius. Essentially, it's ensuring that whatever radius you've defined in your theme settings for media, it actually gets applied to your product media containers, especially on mobile where it might otherwise be ignored.

How to Implement the CSS Fix

Adding this code to your Shopify store is straightforward. Here's a step-by-step guide:

1. Log in to your Shopify Admin: Go to your store's backend.
2. Navigate to Themes: In the left sidebar, click on Online Store > Themes.
3. Edit Your Theme: Find the theme you're currently using (likely Horizon or a similar family theme). Click on the “Actions” button next to it, and then select “Edit code”.
4. Find Your Product Template: Look for files related to your product page. This often means navigating to the “Sections” folder and finding a file like main-product.liquid, or searching for “Product information” sections. The instructions specifically mentioned adding it in the “Product information” section's “Custom CSS” setting. If your theme has a dedicated Custom CSS box within the Product information section settings, that's the ideal place.
5. Add the Custom CSS: In the appropriate Custom CSS area (or a file like theme.css or base.css if no specific section CSS is available), paste the code snippet:
   

   .product-media-container {
     --corner-radius: var(--media-radius);
   }

6. Save Your Changes: Click the “Save” button.
7. Clear Cache & Test: It's a good idea to clear your browser's cache (or open an incognito window) on both desktop and mobile devices. Then, visit a product page on your mobile phone to see if the corner radius is now correctly applied.

This fix is great because it leverages your theme's existing variables, meaning you don't have to hardcode a specific radius value. If you change your --media-radius setting in the theme customizer later, this CSS snippet will automatically adapt.

It's a fantastic example of how a small piece of custom CSS can bridge the gap where a theme might have a minor inconsistency. Remember, while Shopify themes are powerful, they can't always anticipate every design preference or cover every edge case across all devices. That's where a little bit of community wisdom and targeted CSS comes in handy!

Always double-check your changes on various mobile devices and browsers after implementing custom code. And if you're ever unsure, don't hesitate to ask the Shopify community – there's always someone ready to lend a hand, just like in this discussion. Happy customizing!