Can someone review this site and tell me why this site is not fitting full screen width on mobile devices? I posted in the CSS forum because I suspect that my design code is conflicting with a plugin I’m using the detect mobile devices and resize the site automatically.
Hi Toad
You need to remove those fixed containers inside your 100% width wrappers, nothing has been styled for smartphone.
I mention something very similar in another post, read post #2
http://www.sitepoint.com/forums/showthread.php?883852-the-secret-to-viewport&p=5186807
Let us know if you need further information.
Barry
So, in brief, I need to create a separate stylesheet for some basic fixes then?
general speaking yes, or add some media queries inside your main css.
I find it much easier and more organized to create separate css for smartphone/tablet.
A quick fix is to just override the main desktop styles, you’ll also need to make your images responsive so they adjust and fit your new container dimensions.
You would end up with something like the below depending on how far you’d like to take this:
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="480.css">
<link rel="stylesheet" media="only screen and (min-width: 600px)" href="600.css">
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="768.css">
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="992.css">
Cool links to bookmark:
http://mediaqueri.es/ - Check out all the sites listed and have a look at their code.
http://mattkersley.com/responsive/ Priceless!
Good points. I’ll see what I can make sense of. I may need help!