Discrepancy in Website Appearance between Localhost and Live Version

Support
, , ,
1

Hi there!

I’m experiencing something strange with my website, and I need your help to figure it out. The issue is that the appearance of my website on the live version doesn’t match what I see on localhost. Specifically, the sizes of the containers are different.

To make it easier for you to understand, please take a look at the following images and compare them:

Netlify host (wrong): https://i.imgur.com/kmFnqFo.png
Localhost (correct): https://i.imgur.com/rldLalS.png

As you can see, both images have the exact same width and height, were taken in the same browser, and reflect the same commit. Nothing has changed or been added since then. Therefore, the difference in container and button widths is real, and I’m not sure why it’s occurring.

You can visit the website hosted on Netlify at https://matifanger.dev.

Additionally, I have built it locally, and it seems perfect. I suspect that there may be an issue with the build process when using Netlify. Interestingly, I have encountered a similar problem with Vercel as well.

Any insights or suggestions would be greatly appreciated. Thank you!

2

@eimattz When you say “built it locally” do you mean that you have run precisely the same Build command that you have set on Netlify locally?

My usual test would be to perform a build locally, and then serve the output with npx serve

Are you able to provide access to the repository?

3

@nathanmartin I built it locally using yarn build, and then I run it using the node command that throws at the end of the build.

This is the repository: GitHub - matifanger/portfolio-v2: My portfolio v2

4

I’m unable to test your project locally due to this error:

[FirebaseError: "projectId" not provided in firebase.initializeApp.] {
  code: 'invalid-argument',
  customData: undefined,
  toString: [Function (anonymous)]
}

This makes me think this is not a problem with Netlify (or Vercel for that matter). Maybe OS somehow makes a difference? Netlify uses Ubuntu. Not sure what Vercel uses, but maybe you can try building your app on an Ubuntu machine?

5

@eimattz For what it’s worth I was also unable to test your project locally, but I was receiving a different error related to JSON syntax.

6

@hrishikesh @nathanmartin

After searching everywhere and making several attempts to activate/deactivate modules, plugins, whatever… I realized what was happening.

It appears that I had a 110% zoom on my localhost.

id6It3FhQ0

I came to this realization when I compared the custom width of an image. The intended width was supposed to be 100px, which was correct on Netlify, but incorrect on localhost.

So, at least we’ve learned something new… when you zoom in on a website, it remains that way indefinitely.

7

@eimattz If you’re ever in doubt, you can hit ctrl/command + 0.

It’ll jump you back to 100% regardless of if you’re currently accidentally zoomed in or zoomed out.

1 Like