Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Eric Smith
3,537 PointsWhy does my site look different on localhost?
I've made a basic site and when I open index.html on a browser, Safari or Chrome, the site looks great and just as I want. However, when I take that file and all its contents (CSS, images, Jquery, etc.) and load it on my local web server and access localhost from Safari or Chrome, even though the code is identical, the output is terrible. It doesn't scale. The default view, however, is my smallest media query designed for an iPhone; when the window on a desktop is resized, it stays the same iPhone layout. What am I doing wrong? Will this happen when I upload these files to an external server and point my domain to them? What do I need to change on my code or the browser when accessing localhost?
First website. Thank you!
2 Answers
Eric Smith
3,537 PointsYES! Fixed it! I ran Chrome again with the developer tools and it said it couldn't access grid.css. I accessed the permissions and checked them against other files in the main directory, and there it was: grid.css lacked permissions. I enabled them read access and all is good! Thank you so much for your support and assistance!
Steve McKinney
29,274 PointsHi Eric,
It's hard to guess without seeing it for myself, but I imagine the paths to some files could be wrong, if this is the case you will probably have to update them when you put it on another server.
In chrome if you open developer tools (cmd/ctrl + alt + i) at your local site and in the bottom right (there should be a number with a red icon) are the any errors highlighted? Click that to see if any are "resource not found" if it's the case then it should be paths.
Post a screenshot and any code here too if you need any further help, hopefully we can debug it for you.
sam devos
3,644 Pointsi agree with the path mistake. Is your folder structure the same on your local host map?
double check your paths :)
Eric Smith
3,537 PointsThank you. I checked the file paths and all match. Even when I open the index.html file within the webserver directory using Safari or Chrome, again the site looks great. But then I go to localhost using the same browser, different tab/window and it's terrible.
I opened Chrome's developer tools and found one error: Invalid CSS selector: button::-moz-focus-inner, input::-moz-focus-inner
I didn't make any changes to the normalize.css file; it's the same I received from some of the first lessons.
Here's a link to a side-by-side comparison screenshot: https://www.dropbox.com/s/2grahpf8x78vasr/screenshot.png. Thank you again for your help.
Eric Smith
3,537 PointsI'm noticing there are slight differences. Overall, things look great and just how I want them. But some of the margins, it seems, are different and extended on the localhost as opposed to opening index.html from the browser. Is it safe to assume when I upload these files to an external web server that others will be seeing it as I am on localhost rather than the other view?
sam devos
3,644 Pointslink doesn't work. as dropbox is a private thing . upload it with imageshack... maybe clean internet cache. which program are you using wamp or mamp or xampp?
sam devos
3,644 Pointsoh saw your solution glad its ok now :)