Site now (mostly) mobile-compatible

Submitted by C B Wright on

Earlier this year I switched over to a new theme that was supposed to support mobile devices. It did, for the most part, but there were... um... aberrations that forced me to disable some of its mobile device-friendly tricks. As a result, trying to look at my website on a mobile device, specifically a smartphone, was not a pleasant experience.

This weekend I think I fixed most of that, so if you're one of the brave few who visits this place on your cell phone, well, it should be easier to do.

For those of you who visit here with computers, you probably won't notice too many of the differences, with the exception of the pagers I use for the webcomics (I had to stack the pagers on top of each other in order to get them to fit on a mobile device). Other than that, you shouldn't notice the changes at all. If you want to see what it looks like, though, you can just change your browser size. The changes are based on a calculation of display width, so if you reduce the width of your browser you'll the layout update accordingly.

The last thing I need to take care of on the mobile device front is the Fiction Page. The multi-tabbed box at the top doesn't display well on small screens. It's something I've been planning to update anyway, because it's a bit cumbersome to manage and isn't as useful as I was hoping.

If you find any site problems, post them here in the comments or put something in the site forums.

Comments

Comments are active for 30 days after publication. If you wish to comment after 30 days please use the Forums.

It probably wouldn't be hard

It probably wouldn't be hard to make the nav buttons switch back to a single-line layout on large-enough screens. I'd start by specifying "box-sizing: border-box" on the li elements, so their borders appear inside your specified width rather than outside it; that would let you set their width to 120px instead of 118px and get the same layout as now. Then you can set their width to 50%/100% instead of hard-coding it to 120px/240px. Next you could completely remove the hard-coded width from the ul.flippy, and add, say, @media(min-width:600px) (play around to find a width you like) that changes the li widths from 50%/100% to 20%, so the whole line switches back to one row when the browser is wide enough.