I am facing an issue with my CSS file.
It appears to work perfectly on the development server, but when deployed to the release server, some margins and heights are not displaying correctly.
After inspecting the elements in both environments, I have confirmed that the applied CSS is identical (I meticulously checked every property).
- I have tested on multiple browsers
- I cleared the browser cache
- I even attempted to copy the dev
<head>and place it in the release server - I removed all other links from the release server's header and only included the CSS file
Despite trying all of the above methods, the issue persists - everything looks the same, yet it's broken on the release server.
This worked flawlessly on the dev server, so why is it not working on release?
document.querySelectorAll("link[rel=stylesheet]").forEach((elm) => {
elm.remove()
})
x = document.createElement('link')
x.setAttribute('rel', 'stylesheet')
x.setAttribute('href', 'https://example.com/myfile.css')
document.head.appendChild(x)
Here are some examples of what's broken:
- On dev (correct): enter image description here
- On release (broken): enter image description here