CSS acting differently in localhost - css

I'm working on a project. So first, i started with front-end. And then after finishing that, i loaded all the files in django app and started the localhost. But suddenly everything seems to be bigger. Most of the padding, margin, font-size, changes from small to big
I have disabled cache, recoded all the static linkings
1.front end designed locally is the first image.
2.frond end after loading into localhost is the second image
Why is this happening, is there any solution for this. Do I have to redesign all on the perspective of localhost AGAIN?

Related

Online and Local site not looking the same on same screen and browser

So my problem is the following: my website doesn't look the same local and online. It is linked to the same git repository and same css file, however. I can open the page in local and online on same browser and same screen.
Everything seems linked correctly, since when I update the git repo from my local project, I see the changes on the online project. Except for some css property.
On local: the font-size is much bigger and more appropriate, and the flex/height of the container div are all Ok.
Online: font-size is way too small; div doesn't have proper height, and flex aren't respected.
Any idea what the problem is?
I'm using Digital Ocean for hosting the website and Buddyworks for linking my github to Digital Ocean. I'm sure auto upgrade is enabled because when I add content, it is showed on the online version.
The project itself is in NextJs and CSS.
Any help is welcome. I'm using Chrome but tried also Firefox as well and the same issues are happening.
Screen of local rendering:
https://ibb.co/rGL7Y7j
Screen of online rendering:
https://ibb.co/8sPkjJS
PS : Sorry for my English, I'm not an English native speaker :)
Ok it's my bad, for some reason the second broswer window didn't open in same zoom level than first one ...
If it happens to anyone again, I just had the same issue today except that the fonts were way bigger online and it was not a zoom issue.
I made my web app with ReactJs and I simply forgot to build it before deploy it (on Netlify).

CSS Rendering differently on server than local

I have this annoying CSS rendering issue that I am not sure what is causing it.
on my local copy everything looks that way I want it. When I deploy it to the server IIS.
there is one minor very minor DIV that is not rendering the way I want it or the same is what the local copy renders.
In this case, there is a padding on top and bottom of the div when there should not be. It looks fine in the local.
I tried setting the X-AU in the header but that did not help.
It is only rending that one div differently. all of the other elements looks fine. This is really strange.
Have you tried to disable IIS static content compression?
I already had issues with minified jquery and css on servers running IIS and I had to change it to non-minified versions of it.
Can you check if on your local you are running the site using SSL? I had a similar issue. I was running the site within VS 2013 and local IIS over SSL and on the live site, I was not. Fix was to configure https bindings on the live site and this fixed the issue.

Content larger on server than localhost

Everything seems to be displaying larger online (heroku) than running on localhost. Text, buttons, images, everything. I am using chrome to access both versions. Any reason this may be?

JQuery Mobile Renders Incorrectly on my Rails Development Server

I'm having the hardest time trying to figure out this bug. All my widgets in JQuery Mobile render incorrectly on my development server, but when I push changes to heroku everything is fine. I tried deleting my tmp folder in rails but it still renders strangely.
Here are screen shots of my development server and the heroku one:
I think it has something to do with the asset pipeline, but I have no idea what might be causing it.
Make sure you delete your public/assets folder. Compiled css and js will overshadow your changes

Identical files from different servers. Why might IE 8 display them differently?

I'm working on a site that will go on my company's intranet. I developed it locally on my computer, checking it in different browsers and on colleague's computers, and when it was done I handed it off to IT. They put identical copies on a staging server, and on the production server. This is a site built only with html, javascript, and css. No server side scripting. It also uses a DWF viewer plugin from Autodesk. It is a single standalone page (not part of a CMS) that allows users to load drawings into the viewer and then click to see info from a database of space info saved in a series of js arrays (the space DB software spits out a js file with all the info listed in array literals, creating a crap ton of global variables - ugh, but I digress).
When I followed their links (using IE 8) the version on the staging server looked as expected, but the layout is hosed on the version from the production server. Specifically, it seems like a div that is supposed to flow to the right of a div that is float: left is displaying below the floated div at full width, as though it was clear: left (which it is not). It also has the wrong height.
I downloaded the files from each and they are identical to my local version. Frustrated, I cleared my browser's cache, restarted my computer, checked it on a colleague's computer who also has IE 8. All the same issue. Staging server good. Production server bad.
Finally I uninstalled IE 8 and looked at it in IE 6. Both versions looked fine.
So, to recap. Two different servers. No server side scripting. Identical files. One browser agrees they are identical, the other does not. What could cause this?
Have you checked that IE8 isn't rendering it in compatibility view (IE7 rendering)? By default IE8 renders things in the "Intranet Zone" in compatibility view with everything else in normal mode.
You can change the mode with the little broken page button to the right of the URL bar.
Apart from the compatibility setting, other things that could differ from computer to computer for an identical page:
Font size. Windows allows system-wide font resizing, impacting layouts. It could account for the second div falling underneath the first one.
Resolution. Could it be a resolution issue? Could also account for the div problem.

Resources