I've developed a wordpress theme on my local machine using apache, when I upload it to the internet hosting server the layout looks larger however the layout still looks fine.It's kind of like it's expanded everything 5%.
I'm viewing the site in firefox only on my local enviroment and on the live site.
When I switch between the two environments it still appears larger on the live site.
If I'm using Win7 and the internet host is using linux will that affect the layout?
My conatainer div's are set in px and I've also set the default font-size to 14px.
Have you tried using a different browser to test in?
Have you tried pressing Ctrl+Zero to reset the zoom level?
Related
Similar Question:
Why does my website appear smaller on a live server than when deployed locally?
So I wanted to reask this question, but please don't say there is already a duplicate. I thought the answer of that page is just basic information, and didn't fix my problem.
My question is similar, the same page in my PC renders fine(Firefox, Chrome), but the same one on a server rendered smaller by Firefox(Chrome OK). My local webpage is using the URIfile:/// and I have hosted a page on a free server, of course the URI would then behtml://. That is all I know.
Local: !
Web: !
As you can see, both screen sizes are exactly the same, the CSS is the same, not zoomed in, I suspect it is how Firefox handle px sizes differently, but this is the 1st time happening. Why? How to fix?
Extra Information:
I discovered if I zoom in in Firefox 1 time in the page on the server, it is the same size as the page locally
Is it possible you're zoomed in? Try pressing control + 0 to reset the zoom, or using control + the mousewheel.
Came across an interesting problem that's really stumped me when attempting to implement the Twitter Bootstrap framework today. The issue I was initially attempting to solve was the appearance of horizontal scrollbars in Chrome when I resized the browser close to the breakpoints in the responsive template.
To troubleshoot this, I decided to copy the starter template verbatim, which was displaying correctly for me on the Twitter Bootstrap site. For extra consistency, I altered the relative paths of the included Bootstrap resources to point directly at the same files hosted on Github.
Mind-bogglingly, the problem still occurred even using the exact same code. You can view a working example of the broken version here. Just resize the window horizontally in the latest version of Chrome and you'll notice scrollbars will appear on the bottom when the width nears a breakpoint. On a hunch, I copied the same file over to a different server and...it works?!
I honestly don't have a clue what could be causing HTML/CSS/JS to be behaving differently in the same browser across two different servers. The closest I could find were discussions from developers transferring files from local to remote environments and/or using IE. Any insight would be much appreciated!
I'm guessing Chrome was zoomed in.
For an html page, $(window).width() is giving different values when its hosted on server.
My laptop's resolution is 1920 X 1080.
When I open the page locally on Firefox and Chrome, the width is shown as 1920. The same page when I hosted on a server and when its opened, the width is shown as 1097. Why is this difference? Due to this difference the whole layout of the page is different. How I can solve this?
P.S When the page is opened in IE, the width is same on local and server.
I'm using Zurb's foundation framework (3.2).
jS not run into the server window has some property for Width like this
window.outerWidth
window.innerWidth
that change on re size browser screen with get log from window you can see all property in developer tools
console.log(window);
I had the same problem in Google Chrome. Apparently media queries get messed up if the page is zoomed in or out. Make sure your zoom level is 100% for both sites.
I confirm the issue and believe actually nothing (Ubuntu 12.04, Mozilla Firefox 26.0)
http://www.potomek.eu/blog/media/differentscreenwidthissue.jpg
I'm running Ubuntu (12.04.1 LTS) using VirtualBox (4.1.14) on a Windows 7 host machine. It seems that, using Chrome (21.0.1180.89), CSS transformations are causing the browser to lock up in a strange fashion.
This can be tested using this page: http://benmurden.com/css3test/css3test.html
In short, it looks like the "content area" of the browser, that is, anything apart from the URL bar, tab list etc. stops rendering during or after a CSS transformation and becomes "stuck" on top of every other open process. I can still close the offending tab or the browser itself since that area of the browser is fully responsive. I can even switch to another process and it will be partially visible under the "stuck" content area on top of it.
I meant to take a screen cap to demonstrate this particular effect but after locking up Chrome in this way and switching to a text editor behind it, only the text editor was fully visible on the screen cap and the locked-up Chrome was nowhere to be seen. This leads me to believe this might be a problem with VirtualBox rather than Chrome itself. Then again, there is someone sitting next to me with a nearly identical setup: Same type of machine running Chrome on Ubuntu using VirtualBox with identical versions of those three and he does not experience this issue.
I am unable to reproduce this on any other browser and host/guest combination I'm currently using. Those are:
Firefox (15.0.1) on Ubuntu
Firefox (15.0.1) on Windows 7
Chrome (21.0.1180.89) on Windows 7
Please let me know if there's any other information I could supply that would be of use.
Thanks!
I've been working on a site in a MAMP environment and recently uploaded it onto a hosting server to do cross-browser testing and noticed something weird. The page is literally larger -- not that the container has changed pixel size (Chrome's "Inspect Element" says it is 940px wide in both instances) but if I flip between a tab in the local environment and a tab with the server environment, it is literally visually larger. 940px means a larger screen distance on the server, evidently.
Everything seems to be resized to the same ratio so it hasn't affected the layout at all, so I'm not exactly troubled by this, but I am sort of puzzled. Does anyone know why this is happening and if I should be doing anything in particular about it?
Are you sure you haven't "zoomed in" to the page?
Press cmd+0 to make sure you are at 100% zoom level... (I guess it's just ctrl+0 on Windows)
Another reason could be that a monitor has a different resolution...
That is because of different screen-resolutions, or because you have zoomed the chrome-window.