If you look at the site on a mobile device, you can see that the top gray bar and footer div containers get cut off at the right margins. I would like it to extend all the way to the end. But I can't seem to figure out why this is happening...
Any help will be greatly appreciated and you shall surely be blessed!
<!-- Mobile --><link href="include/style_m.css" rel="stylesheet" type="text/css" media="only screen and (max-width:349px)"><!-- Tablet --><link href="include/style_t.css" rel="stylesheet" type="text/css" media="only screen and (min-width:350px) and (max-width:799px)"><!-- Desktop --><link href="include/style.css" rel="stylesheet" type="text/css" media="only screen and (min-width:800px)"><!--[if lt IE 9]><link href="include/style.css" rel="stylesheet" type="text/css"><![endif]-->
Media Queries don't work in old versions of IE, so the "override" at the end there tells IE which stylesheet to use (probably the desktop-version) because if there is a media query in the line, IE ignores it... but I'm pretty sure IE 9+ works fine.
The code above has "Mobile" as any screen 349px wide or less... it has "Tablet" as any screen from 350px wide up to 799px wide... and anything at or above 800px wide is "Desktop" -- you basically have one separate CSS file for each type of screen... With that, you can modify your "regular" stylesheet to "look right" on a small screen without messing up your big-screen style version.
The only down-side is that modifications have to be made to each stylesheet, like if you wanted to add a new class or change a color or something... You have to update each file separately.