- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi. I’m trying to make my website responsive, and as you can see [here](http://www.gchiller.com/test/index(WIP).html “G Chiller Test Site”), 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.
@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.