Deploying my website and all the components have moved and got bigger

Support
, ,
1

Hello Everyone!

Hope you are all well and good? I am a newbie so to speak as to deploying websites, so I’m hoping I could get a little advice. I have built my own portfolio website, I have everything done so I purchased a domain name and deployed my website. In comparison to say when i run my site at localhost everything has shifted and got bigger on the the deployed website. Is this common? I’m just wondering do I need to to fix this. I will below give you the deployed site and GitHub repo, any advice or guidance as to where I should start looking to resolve this would be much appreciated. Thanks in advance.

Stephen

2

@SWelch I’ve run your project locally both with the development server npm run start and by doing a build and serving it statically npm run build && npx serve -s build.

Both look identical to me, and match what is deployed on Netlify.

Usually when people encounter issues like this, it’s due to a difference between what their development script/mode does and what their build script/mode does.

Often they have configuration that only targets one or the other, for example in your package.json you have a kind of classic example:

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

In this case it’s unlikely to be the main issue, since I see the same thing from both develop/build, but it’s something to watch out for.

When you’re in doubt, the best comparison is to run the same build command locally as on Netlify.

3

Thank you so much for taking the time to look at my code Nathan, much appreciated. What course of action would you suggest for me? Sorry completely new to deploying.

4

@SWelch I’m curious as to why you’re seeing something different when running the local development server.

You might want to check your browser zoom level / reset it for the site, e.g. ctrl + 0 or cmd + 0 (depending on your os).

Outside of that, it just looks like you need to fix the CSS etc.

For example the resolution of my monitor isn’t wide enough to accommodate the fixed width of the image that you have (1899px), and that pushes the entire site out and I get a horizontal scrollbar…

image
image923×1238 67 KB

Setting the image width to 100% rectifies it…

image
image1122×1254 84.9 KB

5

Nathan thank you so much I adjust the browser zoom, and that was the cause of it, yes I think I need to still do a few adjustments to some CSS I also need to add in some media queries too. I really can’t thank you enough for taking the time to help me out here, I really though I’m going to have to go over everything again and change everything to adjust to the deployed screen.