My URL: https://calgarymultimedia.netlify.app/
I build and test my web site locally before deploying to Netlify. I test using Chrome, Firefox, and Safari on my local drive. I’m using Atom as a text editor.
This may be a rookie mistake on my part and I’m unclear how to solve it. I’ve gone through the support docs and support forum to see if this is a common issue but found nothing.
When I test my web pages locally, all 3 of these browsers produce basically a similar looking web site with only slight differences.
But after doing a manual deploy in Netlify (i.e. dragging and dropping the website’s folder) and then reviewing the produced web site, all of my pages look differently to what I was expecting, except, oddly enough, my contact form. The form looks identical (i.e. perfect) to what my local drive browsers display and is what I was expecting to see.
For example, if you look at my About page, you will see a large gap between the bottom of my white navigation bar and the h1 header text (“What We’re About”). This large gap doesn’t exist on any of my local drive browsers. My footer is ¾ of the way down the page and on top of content, not at the bottom of the page where it’s supposed to be (and as it is displayed when using my local drive browsers). My Information, About, and Solutions pages all suffer these same issues.
Oddly, all of these same issues appear in Chrome, Firefox, and Safari when using Netlify’s server, but not when I test these pages on my local drive.
My home page is totally messed up. I’m using CSS Grid to arrange that specific page. Sections that line up perfectly on my local drive have large offsets when Netlify displays them. And the footer is not at the bottom of that page either.
Attempted to Fix These Issues
I attempted to change these pages so that Netlify displays them as my local drive browsers do. I changed margins, padding, etc.in the CSS files.
But now none of my CSS changes are being displayed either. I put ugly red borders around the h1 text and sections but none of those changes are displayed. Then I changed the background colour of the About page to red to again verify that my changes are not happening, and the background colour remained green. These changes are displayed when using my local drive browsers. I verified that the website folder is the correct one by looking at the time modified column of these CSS files before dragging and dropping the folder.
I’m unclear what I’m doing wrong.
