Hi. I'm trying to make my website responsive, and as you can see here, the responsive part works perfectly (except for the footer, I'm working on it) on a desktop. For some unknown reason, however, when I go to the site on my phone (Samsung Galaxy S3 with Firefox), it displays it as if the site was on a desktop. I'm using CSS media queries with pixel widths to (try to) make the website responsive. Obviously this isn't working and I don't know if it's because of the way I'm doing it or for some other reason, but can someone please help me?
@sloveland: Thanks for the quick reply! I tried that code and it's working...somewhat. Everything is a bit too big on my phone's screen, but that's probably just a quick css fix. Thanks for the help!
@posterity576: Thanks also for the reply. I'm using sloveland's code and it's working.
Just as a little background, I believe the width=device-width helps tell the mobile browser that it doesn't need to zoom all the way out to get the "helicopter view"; in a sense letting it know that you've made it responsive.
The initial-scale=1 is for retina screens (newer iphones and ipads), telling the browser to render the page at normal resolution instead of trying to double up pixels.
Hi. I'm trying to make my website responsive, and as you can see here, the responsive part works perfectly (except for the footer, I'm working on it) on a desktop. For some unknown reason, however, when I go to the site on my phone (Samsung Galaxy S3 with Firefox), it displays it as if the site was on a desktop. I'm using CSS media queries with pixel widths to (try to) make the website responsive. Obviously this isn't working and I don't know if it's because of the way I'm doing it or for some other reason, but can someone please help me?
Try injecting this in your head block;
Wow, sorry having code-posting issues. Here's a pen with the code I'm talking about.
http://codepen.io/sloveland/pen/zmnou
Easy fix. Add the following within the Head section of each of your documents:
@sloveland I didn't see that you posted the same thing. Oops!
@sloveland: Thanks for the quick reply! I tried that code and it's working...somewhat. Everything is a bit too big on my phone's screen, but that's probably just a quick css fix. Thanks for the help!
@posterity576: Thanks also for the reply. I'm using sloveland's code and it's working.
@posterity576 hey no problem!
@NoizyCr1cket glad we could help. =)
Just as a little background, I believe the width=device-width helps tell the mobile browser that it doesn't need to zoom all the way out to get the "helicopter view"; in a sense letting it know that you've made it responsive.
The initial-scale=1 is for retina screens (newer iphones and ipads), telling the browser to render the page at normal resolution instead of trying to double up pixels.
At least that's what I think it is, after reading articles. More here. https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
And good job learning responsive. =)
@sloveland Ok. Thanks for the link.