CSS renders differently on deployment

Support
, , ,
#1

Hi everyone,

I was hoping to ask why my css is being rendered differently when I deploy to netlify.

It appears that all of the elements have been enlarged when I compare it with my local repo but I can’t understand why when my css is in one file and has already been compiled from sass.

Here is the link to the current deployment: https://ccartgallery.netlify.app/index.html

and a screenshot of what the landing page should look like

Screenshot 2020-09-26 at 21.28.37
Screenshot 2020-09-26 at 21.28.372560×1398 257 KB

I hope someone can help with this.

Thank you in advance,

Konstantin

#2

Hi @Konstantindev1, welcome to the Netlify Community! :wave:

I took a look at the link you posted and don’t see the issue you’re describing. Here’s a side-by-side of your screenshot versus what I’m seeing on my end:

yours
yours1380×752 153 KB

yours

mine
mine2880×1456 295 KB

mine

A few things I’d check:

  1. Make sure your browser isn’t zoomed in.
  2. Make sure your SASS/SCSS is compiling correctly by testing locally.
  3. If you still are having issues, it would help to have a reduced test case where you can reproduce the issue you’re having specifically.

Netlify doesn’t make any changes to your stylesheets by default so if there are differences you’re seeing from your local environment to your deployment it would either be to system or site specific settings local to your machine, or some sort of build quirk. However, since I can’t reproduce your issue, I would bet that the origin of this problem has to do with something within your setup.

Hope this helps!

#3

Hey! Interestingly I just made a post with a similar issue, It appears that the order that the CSS was processed, or the way it was compiled was in a different order, I haven’t identified exactly why or what the order difference is but if I add !important tags to my CSS it worked which tells me it is a cascade problem.

Perhaps this workaround would be helpful for you as well as a quick fix. Though I am still trying to figure out what is actually going on.

Good Luck!

#4

Hey @jessejburton, thanks for chiming in. I would caution suggesting the use of !important declarations as a workaround, they can cause a lot of unintended side-effects and are generally not recommended for use in a production environment except for as a last resort. See this article for some context.

Without any sort of URL to look at, I can’t help you with your problem, although if you made a different post I can definitely hop over there to take a look. With this issue specifically, I think it has to do with settings on @Konstantindev1’s machine, as I was unable to reproduce the issue that they were seeing.

#5

Hey @noelforte,

Thank you so much for taking the time to look into this. I’ve gone through those points you’ve made and it does seem that the zoom might be a factor that is changing it strangely enough. The zoom levels seem to be different even though I am using the same browser with the same settings :rofl:

I’ll keep looking to see what else could be causing it.

Thank you once again :slight_smile:

#6

Hi @jessejburton,

Thanks a bunch. I’ll see if that might be a factor also.

Good luck with yours too !

#7

Hi @noelforte! Thanks for your response and wisdom :slight_smile: I absolutely agree with you about the use of !important tags, I was not intending to suggest it as a fix but as a way of debugging. In my case using the !important tag allowed me to get it working and figure out that my issue was a cascading issue so in my case the actual “fix” was to bring my styles into my component and out of the global styles sheet.

That stops me from having to use the !important tag and is a much better solution, however it still leaves me wondering what could be the actual cause of the difference between local and production when it comes to the compiling of the CSS (which was the similarity that I noticed about this post)

My guess is that it might be a difference in the sass compiler or version that is used on Netlify vs my local version! Perhaps that could be true in this instance as well? I have sass installed as a global package, does Netlify have that as well?

#8

@Konstantindev1 Thanks :slight_smile: