Some UX/UI features of my live site renders differently than on my local environment

Hi,
My issue seems to be a simple one, but I couldn’t find anything related to this. I’m able to deploy my site and see it live, however, some styling and functionality is skewed when you visit the site.I’m not sure if it’s the at fault somewhere in the build or how I might have my program setup.

Here is a link to the site: madeonearthapparel.netlify.app

I don’t know what what other resources might be helpful to assist me with resolving this issue. Please let know any information I can possibly provide! Thank you in advance.

hey danny, without knowing what you expect to see it is a little difficult to make even a guess (let alone a logical conclusion) as to what might be happening.

i assume you are sure that you are viewing the same version locally than the one that is live, i.e. there is no way you have a build that didn’t complete, thus not updating on live? Are you having any build issues show up in your log?

if you can explain a little more what you are expecting to see vs. what you actually see we can potentially offer some more assistance.

Hey Perry, thanks for getting back to me.

I actually created another topic with some more details. Missing some css styling after being deploy

I’ve written css for some classNames but I don’t see that they’re actually being applied to the live site when I open the inspector tool. I also don’t see any issues showing up in the build log, just a warning about package-lock.json.

1:26:31 PM: Build ready to start
1:26:32 PM: build-image version: 2dbd444fcdce00cf06325060a8238d5ae3e86774
1:26:32 PM: build-image tag: v3.3.7
1:26:32 PM: buildbot version: d305548225ac57bb00eb5a596b0b8674e76a4681
1:26:33 PM: Fetching cached dependencies
1:26:33 PM: Starting to download cache of 187.3MB
1:26:33 PM: Finished downloading cache in 943.379782ms
1:26:33 PM: Starting to extract cache
1:26:41 PM: Finished extracting cache in 7.322447666s
1:26:41 PM: Finished fetching cache in 8.313305104s
1:26:41 PM: Starting to prepare the repo for build
1:26:41 PM: Preparing Git Reference refs/heads/master
1:26:42 PM: Starting build script
1:26:42 PM: Installing dependencies
1:26:42 PM: Started restoring cached node version
1:26:46 PM: Finished restoring cached node version
1:26:47 PM: v10.20.1 is already installed.
1:26:48 PM: Now using node v10.20.1 (npm v6.14.4)
1:26:48 PM: Attempting ruby version 2.6.2, read from environment
1:26:49 PM: Using ruby version 2.6.2
1:26:49 PM: Using PHP version 5.6
1:26:49 PM: Started restoring cached node modules
1:26:49 PM: Finished restoring cached node modules
1:26:49 PM: Started restoring cached yarn cache
1:26:49 PM: Finished restoring cached yarn cache
1:26:50 PM: Installing NPM modules using Yarn version 1.17.0
1:26:51 PM: yarn install v1.17.0
1:26:51 PM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
1:26:51 PM: [1/4] Resolving packages…
1:26:52 PM: [2/4] Fetching packages…
1:27:11 PM: info fsevents@2.1.2: The platform “linux” is incompatible with this module.
1:27:11 PM: info “fsevents@2.1.2” is an optional dependency and failed compatibility check. Excluding it from installation.
1:27:11 PM: info fsevents@1.2.12: The platform “linux” is incompatible with this module.
1:27:11 PM: info “fsevents@1.2.12” is an optional dependency and failed compatibility check. Excluding it from installation.
1:27:11 PM: [3/4] Linking dependencies…
1:27:11 PM: warning " > @testing-library/user-event@7.2.1" has unmet peer dependency “@testing-library/dom@>=5”.
1:27:11 PM: warning “react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1” has unmet peer dependency “typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta”.
1:27:21 PM: [4/4] Building fresh packages…
1:27:22 PM: success Saved lockfile.
1:27:22 PM: Done in 31.27s.
1:27:22 PM: NPM modules installed using Yarn
1:27:22 PM: Started restoring cached go cache
1:27:22 PM: Finished restoring cached go cache
1:27:22 PM: unset GOOS;
1:27:22 PM: unset GOARCH;
1:27:22 PM: export GOROOT=’/opt/buildhome/.gimme/versions/go1.12.linux.amd64’;
1:27:22 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
1:27:22 PM: go version >&2;
1:27:22 PM: export GIMME_ENV=’/opt/buildhome/.gimme/env/go1.12.linux.amd64.env’;
1:27:22 PM: go version go1.12 linux/amd64
1:27:22 PM: Installing missing commands
1:27:22 PM: Verify run directory
1:27:22 PM: Executing user command: npm run build
1:27:23 PM: > madeonearth@0.1.0 build /opt/build/repo
1:27:23 PM: > react-scripts build
1:27:24 PM: Creating an optimized production build…
1:27:39 PM: Compiled successfully.
1:27:39 PM: File sizes after gzip:
1:27:39 PM: 58.11 KB build/static/js/2.f6908783.chunk.js
1:27:39 PM: 6.11 KB build/static/js/main.16a2ce1c.chunk.js
1:27:39 PM: 1.96 KB build/static/css/main.e65767d0.chunk.css
1:27:39 PM: 773 B build/static/js/runtime-main.9870eb24.js
1:27:39 PM: The project was built assuming it is hosted at /.
1:27:39 PM: You can control this with the homepage field in your package.json.
1:27:39 PM: The build folder is ready to be deployed.
1:27:39 PM: You may serve it with a static server:
1:27:39 PM: yarn global add serve
1:27:39 PM: serve -s build
1:27:39 PM: Find out more about deployment here:
1:27:39 PM: bit.ly/CRA-deploy
1:27:39 PM: Skipping functions preparation step: no functions directory set
1:27:39 PM: Caching artifacts
1:27:39 PM: Started saving node modules
1:27:39 PM: Finished saving node modules
1:27:39 PM: Started saving yarn cache
1:27:39 PM: Finished saving yarn cache
1:27:39 PM: Started saving pip cache
1:27:39 PM: Finished saving pip cache
1:27:39 PM: Started saving emacs cask dependencies
1:27:40 PM: Finished saving emacs cask dependencies
1:27:40 PM: Started saving maven dependencies
1:27:40 PM: Finished saving maven dependencies
1:27:40 PM: Started saving boot dependencies
1:27:40 PM: Finished saving boot dependencies
1:27:40 PM: Started saving go dependencies
1:27:40 PM: Finished saving go dependencies
1:27:40 PM: Build script success
1:27:40 PM: Starting to deploy site from ‘build/’
1:27:40 PM: Creating deploy tree
1:27:40 PM: Creating deploy upload records
1:27:40 PM: 0 new files to upload
1:27:40 PM: 0 new functions to upload
1:27:40 PM: Starting post processing
1:27:40 PM: Post processing done
1:27:40 PM: Site is live
1:28:10 PM: Finished processing build request in 1m37.633889238s

yeah, i’m not seeing anything in that log that immediately jumps out as the culprit.

looking at your page again, i do see some console errors:

did you take a look at those?

Yeah, so I might have made a bad decision and deleted my previous site to create another one, thinking that I missed something in the process. Now I’m at a set back and trying to remember what I did the first time around to over come these console errors. :sweat_smile:Rookie mistake on my end.

I thought that I would be able to fix these bugs by setting my Environment Variable, but that didn’t seem to do the trick. Now I’m looking through previous topics to see what I can find to help me progress…

To be continued…

1 Like

ok mate! well, we’ll be here when you need more help in a little bit. I do think that if you understand the cause of those errors, you’ll have better luck. everything working ok locally?

Yes. Locally, everything works the way I want it to.

Also, I appreciate the assistance :+1:t3:

1 Like

sometimes this causes problems during deploy, especially when things are going dandy on local:

1 Like

I’ll have a look at this and see what I can find!

Alright @perry,

I have resolved the console issues, they were due to quotes I had around the Environment Variable’s value. Once I removed them, the site loads and now I’m back at square one.

I double checked my code on in my local environment and I didn’t see any case sensitivity issues in relation to where my live site isn’t rendering properly. Besides case sensitivity, would there be any other causes for a build to not compile a file or even parts of a file? Could it be perhaps my Publish Directory isn’t set right?

Here is my site’s link if you want to have a look through the inspector tool. You’ll see that
<div class=product ></div> has no styling set for it.
#### madeonearthapparel.netlify.app

And here is a link to my repo where I I have a product component stored: https://github.com/DannyShien/madeonearth/tree/master/src/components/shopify/product

Hey @perry,

I’ve resolved my css issue! I had some semi-colons at the end of 2 of my css files. I just needed to take the time and scanned through my files to triple check if everything was in order! Anyways, thank you for that article and your help!

Bah! It’s always something small like that, isn’t it? Glad to hear you’re up and running again :slight_smile:

1 Like