Different Views

Shopify Discussion
, ,

Topic summary

Shopify store owner customized theme extensively (JS, CSS, custom Liquid) to tailor layouts for different screen sizes. They use size-based targeting for mobile views but see inconsistent rendering across devices—elements appear different sizes on their phone versus a friend’s.

  • Core issue: inconsistent visual appearance across mobile devices despite screen-size targeting.
  • Request: reasons for these differences and guidance on how to achieve consistent results.
  • Context: no images or code snippets provided; mentions multiple customizations affecting views.
  • Status: no responses yet; issue remains open with no identified cause or fix in the thread.
Summarized with AI on December 16. AI used: gpt-5.
1

In my Shopify Store I have added a lot of code to update different things and added a lot of different code (js, css, custom liquid, etc) to make each view look how I want to target the different screen sizes. However, the issue that I’m running into is that even though I will target screen sizes for all mobile devices, certain things will look different sizes or not exactly the same. For example, my phone view will look a little different to my friend’s view. Is there a reason for that or something that I can do to fix that?

1 Like
2

You need to understand that your @media code isn’t the only thing that determines how something is displayed. Different phone settings like resolution, zoom, font size, different browsers and browser settings, all are factors impacting how layout, images, and fonts adapt.

So trying to get everything exactly the same across all platforms and settings, that’s just not something you are going to want to spend your energy on. Target general screens, general platforms, popular phones, etc. make it presentable, that’s about as much as you should do until you have a dedicated IT team.

On a separate note, you should mark your previous posts as solved if they have been solved. Give when you receive.

2 Likes
3

Hi,

Hope this will help

Your store looks different on different phones because “mobile” varies by screen density, browser, OS settings, viewport behavior and accessibility options.

What you can do to reduce inconsistencies

  • Stop targeting specific devices
  • Use relative units instead of fixed ones: rem / em for fonts, % and max-width for containers, clamp() for font sizing
  • Be careful with vh
  • Normalize fonts
  • Test on real devices

Focus on usability and consistency not pixel perfection.