At 2/12/14 02:10 PM, PestoForce wrote: Also, on mobile, the pink header bar and green footer bar don't go all the way across the page...
Well it was a simple fix. You just need to add overflow: hidden to the "topofPage" CSS definition. However, there's also the problem that the layout was not designed for mobile, so it's too wide. If you want it to look proper on both desktops and mobile devices then you'll need to detect when a mobile device is viewing the page, and serve a CSS file that sets a different width for the content. A 900 pixel width seems to work good; I tested it here. I also wasn't aware you wanted this to work on mobile, so you'll need to tweak the HTML slightly if you want to change how the links to games appear, which should only be done for the page that is displayed for mobile. I recommend making two entirely different templates for both desktop and mobile (and if you're not using templates you should be).
I also just noticed that you did this:
<div class="topOfPageInner">
<span> </span>
I can tell you did that because you wanted to change the alignment of your slogan, but that's not a good way to do it. If you want to change how far "right" the slogan is relative to the logo just go into the CSS and change this line in the ".slogan" definition:
padding: 19px 0 0 12px;
The 12px part is the space between the logo and slogan. Just make that number larger if you want more space.