Netlify site name: gallant-tesla-c5b6fe.netlify.app
Screen size: 1280 x 829.
Browser: Chrome, Brave, Safari
Hi All,
So I have a few sites running on Netlify, all written in VueJS. I have problems on all sites with CSS displaying differently when it’s deployed.
An example is the frontpage, where the frontpage should look like this:
But ends up looking like this:
The difference here being the space on top.
If i go further into my site (SPA) there are other places where the CSS is off:
Here all the boxes are nicely spaced with columns:
But once deployed it looks like this:
I simply cannot figure out where the problem origins from, any help is greatly appreciated.
Thanks in advance
/Christian
From the looks of it, the paragraph is missing a top-margin. As to why that’s happening, it’s probably not possible to figure out without looking at source (or a minimum reproducible example).
The second page doesn’t seem to be publicly linked, so I couldn’t check it. However, I think what I said above holds true even for that.
@hrishikesh that might be true, but there should be some padding.
But even if there is lacking some margin, why are the local environment not identical to the deployed one?
Could it be obfuscation/minimisation causing problems?
Can’t deny the possibility. But like I said, to figure out why exactly it’s happening, we’d need a repo with a minimum working example of this issue.
I have been digging around a little bit, and the problem doesn’t seem to be with netlify. But rather how the VueJS application is built.
If i build it for production and the serve it locally - the problem still persists.
I will close this issue, since it’s nothing to do with Netlify.
