This could be solved with media queries.
For those not familiar with media queries, it's a new css function that is supported in the latest versions of all browsers. What it does is check the width(amongst others) of your browser-screen, and give a stylesheet that has been modified for your screen. This way, a website can be styled for both screens of handheld devices as well as laptops and HD-sized screens.
For example, check this website: tropenmuseum. Now resize the width of your browser. As you make the browser window smaller, you can see that the layout changes.
Ofcourse, the thing is, it depends on how your site is set up, and isn't always a case of pasting in some code. The default layouts should have this included, and at the least, we'll need a help topic on it in the layouts forum.
Now for the real question: I'd be a willing to look at the default layout and adapt that one, but the question is, what should the layout be like?
I personally was thinking of a big link to the first comic page and a big link for the last comic page followed by the news.
Or would it be more favourable to have all the links and then the news?
What do you guys think?
EDIT:
I adapted the default layout already:
http://testdesign.smackjeeves.com/(again, make the window-width smaller or check it on your phone to see how it looks)
CSS I had to adapt.(I wanted to get rid of the SJ navbar, but couldn't. Also, there's some stuff with the menu that still need to be changed, but it's a start.)
- Code: Select all
<style type="text/css">
@media (max-width: 480px)
{
#sj-navbar{display:none;}
#content{margin:0px;}
#header{padding:15px 0 5px 0px;}
#latest-comic{margin:0 auto 25px; width:auto;}
#menu{min-height:22px; overflow:hidden;}
#menu li{ font-size:20px;}
}
</style>
Als I found another site that explains even more neat media-query stuff
