Formatting disparity between live site and local

Hi all, got referred to the forums by support.

  • Site name: babyboard.netlify.app
  • Custom domain: babyboard.co.uk
  • Initial problem: The live site isn’t synced with my changes; the font sizes are varied massively and the formatting is completely wrong. I can’t do anything about it because the live site reflects all the changes I make (for example, amending the text content) but doesn’t fix the problem.
  • Initial response from support: May be a caching error, try accessing it under incognito.
  • Outcome: I did, didn’t work, but it does look normal when I use Edge instead of Chrome. Though that doesn’t fix the problem, as I want other people to view my site from any browser.
  • Build log:

9:49:26 AM: Build ready to start
9:49:27 AM: build-image version: 0c5695ad82eb9b0111196b4ab87e76fc88dfb543 (focal)
9:49:27 AM: buildbot version: 44bdaa9bbaa9912838fe50ed0826ccd09db9f453
9:49:27 AM: Fetching cached dependencies
9:49:27 AM: Starting to download cache of 214.3MB
9:49:30 AM: Finished downloading cache in 2.657s
9:49:30 AM: Starting to extract cache
9:49:34 AM: Finished extracting cache in 3.46s
9:49:34 AM: Finished fetching cache in 6.171s
9:49:34 AM: Starting to prepare the repo for build
9:49:34 AM: Preparing Git Reference refs/heads/main
9:49:36 AM: Starting to install dependencies
9:49:36 AM: Python version set to 3.8
9:49:36 AM: Attempting Ruby version 2.7.2, read from environment
9:49:36 AM: Using Ruby version 2.7.2
9:49:37 AM: Started restoring cached go cache
9:49:37 AM: Finished restoring cached go cache
9:49:37 AM: go version go1.19.13 linux/amd64
9:49:37 AM: Using PHP version 8.0
9:49:38 AM: Started restoring cached Node.js version
9:49:39 AM: Finished restoring cached Node.js version
9:49:40 AM: v18.18.2 is already installed.
9:49:40 AM: Now using node v18.18.2 (npm v9.8.1)
9:49:40 AM: Enabling Node.js Corepack
9:49:40 AM: Started restoring cached build plugins
9:49:40 AM: Finished restoring cached build plugins
9:49:40 AM: Started restoring cached corepack dependencies
9:49:40 AM: Finished restoring cached corepack dependencies
9:49:40 AM: No npm workspaces detected
9:49:40 AM: Started restoring cached node modules
9:49:40 AM: Finished restoring cached node modules
9:49:40 AM: Installing npm packages using npm version 9.8.1
9:49:43 AM: up to date, audited 1567 packages in 3s
9:49:43 AM: 253 packages are looking for funding
9:49:43 AM: run npm fund for details
9:49:43 AM: 9 vulnerabilities (2 moderate, 6 high, 1 critical)
9:49:43 AM: To address issues that do not require attention, run:
9:49:43 AM: npm audit fix
9:49:43 AM: To address all issues (including breaking changes), run:
9:49:43 AM: npm audit fix --force
9:49:43 AM: Run npm audit for details.
9:49:43 AM: npm packages installed
9:49:44 AM: Install dependencies script success
9:49:44 AM: Starting build script
9:49:45 AM: Detected 1 framework(s)
9:49:45 AM: “create-react-app” at version “5.0.1”
9:49:45 AM: Section completed: initializing
9:49:46 AM: ​
9:49:46 AM: Netlify Build
9:49:46 AM: ────────────────────────────────────────────────────────────────
9:49:46 AM: ​
9:49:46 AM: ❯ Version
9:49:46 AM: @netlify/build 29.23.4
9:49:46 AM: ​
9:49:46 AM: ❯ Flags
9:49:46 AM: baseRelDir: true
9:49:46 AM: buildId: 653633964f5bf40008c1a3f6
9:49:46 AM: deployId: 653633964f5bf40008c1a3f8
9:49:46 AM: ​
9:49:46 AM: ❯ Current directory
9:49:46 AM: /opt/build/repo
9:49:46 AM: ​
9:49:46 AM: ❯ Config file
9:49:46 AM: No config file was defined: using default values.
9:49:46 AM: ​
9:49:46 AM: ❯ Context
9:49:46 AM: production
9:49:46 AM: ​
9:49:46 AM: Build command from Netlify app
9:49:46 AM: ────────────────────────────────────────────────────────────────
9:49:46 AM: ​
9:49:46 AM: $ npm run build
9:49:47 AM: > babyboard@0.1.0 build
9:49:47 AM: > react-scripts build
9:49:48 AM: Creating an optimized production build…
9:49:51 AM: One of your dependencies, babel-preset-react-app, is importing the
9:49:51 AM: “@babel/plugin-proposal-private-property-in-object” package without
9:49:51 AM: declaring it in its dependencies. This is currently working because
9:49:51 AM: “@babel/plugin-proposal-private-property-in-object” is already in your
9:49:51 AM: node_modules folder for unrelated reasons, but it may break at any time.
9:49:51 AM: babel-preset-react-app is part of the create-react-app project, which
9:49:51 AM: is not maintianed anymore. It is thus unlikely that this bug will
9:49:51 AM: ever be fixed. Add “@babel/plugin-proposal-private-property-in-object” to
9:49:51 AM: your devDependencies to work around this error. This will make this message
9:49:51 AM: go away.
9:49:53 AM: Starting post processing
9:49:53 AM: Skipping HTML post processing
9:49:53 AM: Post processing - header rules
9:49:53 AM: Post processing - redirect rules
9:49:53 AM: Post processing done
9:49:53 AM: Section completed: postprocessing
9:49:53 AM: Compiled successfully.
9:49:53 AM:
9:49:53 AM: File sizes after gzip:
9:49:53 AM: 71.88 kB build/static/js/main.7969f5f1.js
9:49:53 AM: 9.78 kB build/static/js/845.4138fd49.chunk.js
9:49:53 AM: 1.78 kB build/static/js/787.3b40fdf9.chunk.js
9:49:53 AM: 1.23 kB build/static/css/main.1de68271.css
9:49:53 AM: The project was built assuming it is hosted at /.
9:49:53 AM: You can control this with the homepage field in your package.json.
9:49:53 AM: The build folder is ready to be deployed.
9:49:53 AM: You may serve it with a static server:
9:49:53 AM: npm install -g serve
9:49:53 AM: serve -s build
9:49:53 AM: Find out more about deployment here:
9:49:53 AM: Deployment | Create React App
9:49:53 AM: ​
9:49:53 AM: (build.command completed in 6.4s)
9:49:53 AM: ​
9:49:53 AM: Deploy site
9:49:53 AM: ────────────────────────────────────────────────────────────────
9:49:53 AM: ​
9:49:53 AM: Starting to deploy site from “build”
9:49:53 AM: Calculating files to upload
9:49:53 AM: 4 new files to upload
9:49:53 AM: 0 new functions to upload
9:49:53 AM: Section completed: deploying
9:49:53 AM: Site deploy was successfully initiated
9:49:53 AM: ​
9:49:53 AM: (Deploy site completed in 295ms)
9:49:53 AM: ​
9:49:53 AM: Netlify Build Complete
9:49:53 AM: ────────────────────────────────────────────────────────────────
9:49:53 AM: ​
9:49:53 AM: (Netlify Build completed in 6.7s)
9:49:54 AM: Site is live :sparkles:
9:49:54 AM: Caching artifacts
9:49:54 AM: Started saving node modules
9:49:54 AM: Finished saving node modules
9:49:54 AM: Started saving build plugins
9:49:54 AM: Finished saving build plugins
9:49:54 AM: Started saving corepack cache
9:49:54 AM: Finished saving corepack cache
9:49:54 AM: Started saving pip cache
9:49:54 AM: Finished saving pip cache
9:49:54 AM: Started saving emacs cask dependencies
9:49:54 AM: Finished saving emacs cask dependencies
9:49:54 AM: Started saving maven dependencies
9:49:54 AM: Finished saving maven dependencies
9:49:54 AM: Started saving boot dependencies
9:49:54 AM: Finished saving boot dependencies
9:49:54 AM: Started saving rust rustup cache
9:49:54 AM: Finished saving rust rustup cache
9:49:54 AM: Started saving go dependencies
9:49:54 AM: Finished saving go dependencies
9:49:54 AM: Build script success
9:49:54 AM: Section completed: building
9:49:56 AM: Uploading Cache of size 214.4MB
9:49:57 AM: Section completed: cleanup
9:49:57 AM: Finished processing build request in 29.937s

Many thanks in advance!

I can’t upload images to show the situation unfortunately. Also useful to add that the Netlify preview matches the local site.

@NeilBr87 Obviously hard to tell without knowing what it should look like, (which isn’t your fault - I understand the forum doesn’t let people post screenshots initially).

Have you tried resetting your browser zoom, it can be done with ctrl + 0 on Windows or command + 0 on Mac.

A quick test indicates that browser zoom carries across between normal & incognito in Chrome, but obviously wouldn’t carry across between browsers, and thus might explain it.

@nathanmartin Ah, that sorted it - many thanks indeed Nathan!! Can’t believe I missed that.

glad to hear it’s sorted!