Hello, I just got knowledge about Responsive Design one-two week(s) ago. Today, I just created a meaningless (really!) page to try responsive design. I want it so that it’s also viewable in mobile phones.
It worked in my PC nicely, in different sizes. But when I moved to my android phone, I got scared because it wasn’t working at all. I just moved my website files to my SD Card, then opened the folder in my phone and clicked “index.html”. That’s what I did but failed.
For your information, I have Samsung Galaxy Y Duos with Android version 2.3.6 (Gingerbread). I viewed the page with the default browser (coz I have no extra browser installed).
Can you please help me? Would you please test it in your handheld device, I will be very happy if you do it. Here’s the files.
I think it might be. The thing is, mobiles usually assume a viewport width of 980px or something like that. And the media queries will check max-width and min-width against the viewport width. If the viewport is considered to be 980px the media queries for max-width: 767px and max-width: 480px will never be triggered.
Thanks all. CletusSpuckler works like magic. ralph.m, I tried also yours, but sorry, didn’t work at all.
Anyway, I want some explanations. What does the “only” mean in media query (such as: …only screen…). Again, what should I do to apply the same query for screen and handheld?
Again, gradients are not working in Android browser. I tried “-webkit-linear-gradient” and “-webkit-gradient” both, none of them worked. Look at my modified gradient codes for the navigation and the footer: