At 2/12/14 07:13 PM, PestoForce wrote:
Ok, I think I did everything, the contact page is fixed, but the bars still don't go all the way to the right edge on mobile (basically hiding the social links cuz they're on white bg).
It's because the content is pushing the the page width further than mobile devices can display, and the header doesn't depend on that width so it doesn't expand to that width. The simplest solution for now will be to serve a CSS file for mobile devices after the pf.css file that contains this:
.topOfPageInner {
width: 900px;
}
.content{
width: 100%;
}
.contentBodyRow {
margin: 0;
text-align: center;
}
That will resize everything to fit on mobile devices. Here is an example of that, which will look a bit goofy if you view it on desktop. There is definitely a way to make the header stretch to the full width of the page even if its pushed too far by content, but off the top of my head I can't remember how, but I'll play around with the HTML/CSS and get back to you when I figure it out.
And if you would like to have the "recent games" and "popular games" indented from the left just add this:
.contentName {
margin-left: 12px;
}
Where the 12 pixels is however much you want it to be indented.
Also, I made a slight mistake when I originally wrote the HTML and I apologise for that. You don't need a new <ul> element for every row of games since the fixed width of the container will automatically create a new row. You only need one for each separate "block" of game types (i.e. the recent games and popular games). If you view the HTML source for that mobile example that I made you'll see what I mean (if not I can explain it better).