CODEWITHSUNDEEP
jqueryhtmlcssgoogle-chromesafari
Cream Whipped Airplane
Cream Whipped Airplane

Reputation: 1367

Deployed website live. In fiddle everything was fine in Chrome/Phone/Safari. Now in live stuff is messed up

I am completely blown and have absolutely no clue on how to figure this one out. So far I have been developing a website template in JSFiddle. Now that I had more than enough lines of code I decided to deploy it on one of my old hostings. All I did was save the css, js and html into separate files and then linked the css and js in the index.html along with the jquery 2.0.2 and jquery easing plugin.

//EDIT Aight. 'body{ margin: 0; padding: 0 }' fixed the navigation bar issue. But it still totally messed up on the phone. Any chance JSFiddle has some "mobile" measures in place? end of edit//

//EDIT 2 Fullscreen phone screen capture VS chrome's mobile view inspect for samsung galaxy s3. What could possibly be causing the weird widths and heights in the mobile view? screnschromescreen end of edit 2//

//EDIT 3 As I was saying everything is absolutely fine with the JSFiddle result. The below is a screenshot of how the Fiddle looks on phone. There has to be something on JSFiddle making it work which is what I am missing on my site now thats why it messes up only there. The fiddle result is absolutely perfectly responsive, it just craps on the live sitejsfiddle phone screenend of edit 3//

//EDIT 4Adding <meta name="viewport" content="width=device-width"> into head, made it even worse. :/ end of edit 4//

Here is the JSFiddle result When I open this page on phone, in chrome or safari everything works as intended.

The live site is here

It seems to be the same in safari.

But in chrome the navigation is for some reason 8 pixels away from "left", without it being specified in CSS and I can't solve this by doing margin-left:-8px because then I misplace it in Chrome.. Here's an image of that

nav bar issue

Finally when I open the live site on my android phone in Chrome browser the widths are completely messed up.

Am I missing some settings of JSFiddle that I wasn't able to reproduce in my deployment? If anyone would be so kind to take a look at the live site and the fiddle in the various browser and tell me what could be causing any of these issue I would GREATLY appreciate it.

I'll be looking forward to your replies.

Upvotes: 1

Views: 105

Answers (1)

Anupam Basak
Anupam Basak

Reputation: 1523

By default there a padding is set to body. Remove that padding and you may.

body {
    padding: 0;
    margin: 0;
}

This will solve the scaling issues you are having on a phone.

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

Upvotes: 2

Related Questions