Why does my mobile site view differ from desktop design?

Store Design
1

I’m working on the theme for my site on a desktop. I use the mobile view when designing because thats what my site is optimized for. Everything looks fine, until I go on my mobile phone and look at the website as a viewer.

Bold text is gone, font looks different, text is smaller, and it overall just looks different.

Below I attached an example (Left is the site viewed from a phone, right is the “mobile viewer” on desktop shopify)

Screenshot 2023-01-16 132158.png
Screenshot 2023-01-16 132158.png361×744 23.9 KB

yh8h87yh987h87.jpg
yh8h87yh987h87.jpg828×1076 33.1 KB

2

@wnecommerce

give me the store URL

3

wnecommerce.com

4

The problem can only be viewed on mobile

5

Hi @wnecommerce

We checked your issue and saw that this problem might occur on several different operating systems (usually with safari). The operating system will style it in the correct format.

So if you don’t want to be changed across operating systems, then you have to add the following CSS attribute to each element when styling:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
  1. From Shopify admin → Online Store → Edit Code → Find the base.css file and add the above attributes to the elements you don’t want to be changed, or you can add them at the end of the file to fix the section that you don’t want to be changed:
h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}

If you want to fix it in different places, you can take pictures of those places so that we can check for you.

I hope that this can help you solve the issue.