I’m having an issue where it seems the styling on the body tag gets removed when deploying.
I have a canvas element which is intended to be full-screen. I tested this locally and it was working fine. Then in the same browser once deployed the margin re-appears. I added some reset css which didn’t take hold.
In the browser on the live site I changed the canvas to absolute positioning then moved it over the margin area, once I added the same code to a stylesheet and redeployed, the 8px margin was preserved.
I resorted to removing the margin inline on the body element, which again did the trick when live editing. I deployed that but once the site was deployed this was removed from the html?
The active code can be seen here: https://www.ehmke.nl/ you can also see the remainder of what was the inline styling on the body tag.
Any help on how to remove the margin from the body element would be appreciated. At this point it seems like it’s being force?
I might not be seeing what you are seeing, but you have four style sheets that are not loading because of coding errors (macOS / Safari), and the default user / browser style sheet is applying 8px top margin (AKA margin-top).
I saw that my content-security-policy was blocking the scripts from loading.
Is this the error you were seeing or was it something else?
Also reading my post again I could’ve been more clear.
The body tag should have inline styling on it like <body style="margin: 0;"> however when loading the site I was instead seeing <body style=""> so the inline styling was also being stripped.
Oh, when I looked at the code, I saw margin: 0; padding: 0;
Is your browser loading an old version of your page? When I suspect this may be the case, I open a new private window (Safari). Alternately, you can use something like BrowserStack, or get a preview in something like GTMetrix.
Yeah I was making sure it was loading new code by also changing other things. But fixing the CSP so it would allow scripts from my site fixed the issue
1 Like