Nuxt app visually larger once deployed to Netlify

Hello!

I have been working on a Nuxt app and noticed that, once deployed, the site appears zoomed in or blown up a bit. I have attached a screenshot of the Nuxt default app. The left is the version on my local development environment, the right is the deployed version. If I build a production version on my local machine it also looks normal. I have scoured the web and can’t find anything, but I don’t see why this situation would be isolated to me. Anyone else notice this? Is there a solution?

Thanks!

Hi @avbibs,

Netlify isn’t modifying your code when it’s being deployed. You didn’t provide a URL so we can’t look, but I recommend making sure all your CSS is loading and being processed properly.

Hi, thanks for your response! I’m wondering if perhaps certain css files are loading in a different order. Spacing, fonts, etc are all larger when viewed in the Netlify deployed app. Here is a link if that helps: https://nostalgic-gates-3abed2.netlify.com/

If there is a more appropriate place for me to post, I am happy to do so.

This is what I see at that URL:

This is almost impossible for Netlify to troubleshoot. Part of the issue here is that we are trying to compare apples with “secret apples only you can see” (and I’m joking here to be clear). I’m trying to explain why we are having difficulty troubleshooting. We cannot see your local deployment so we cannot do any comparison. We cannot compare the published site to a local version on your computer which we have no access to.

Again, Netlify doesn’t modify the files which are published unless asset optimization is enabled. However, it is not enabled so we wouldn’t modify any files:

https://app.netlify.com/sites/nostalgic-gates-3abed2/settings/deploys#post-processing

We only serve the built content as is without changes. Even with optimization, the changes should be to whitespaces in the code. There should be no visible difference to a displayed page with asset optimization enabled (and again, it isn’t enabled anyway).

So the next step will be to see if there are difference in your locally build files and the ones hosted on Netlify. You can download the exact files uploaded for any successful deployment using the “download deploy” button shown in the following screenshot:

Then you can compare the deploy versions of your files with the local versions to see if there is a difference between the two (using diff for example). If you do find differences, we can research why the local build of the site doesn’t match the build on Netlify. ​Please let us know if you do find differences in the two builds.

If there are no differences, this could be something as simple as the default zoom preference being set differently for the local URL then it is for the published one. This would be a setting in the browser itself and completely unrelated to Netlify.

To summarize, we can suggest ways to troubleshoot this but (without the same access that you have to the locally deployed version) all we can do is give guidance about how to troubleshoot. This, again, is because we lack the required information to be able to troubleshoot ourselves.

1 Like