Thomas (boggyb) wrote,
Thomas
boggyb

Journal tweaking

elemnar pointed out to me the other day that this blog doesn't render well on mobiles. It's a legacy of the table-based design in the Generator layout (which might explain why it seems to have disappeared from the journal customisation pages - or it's just LiveJournal trying to move everyone to the new shinyness regardless of the consequences) which predates anything with a screen taller than it is wide - responsive design is the in thing and is generally quite nice, but requires a lot of CSS tinkering and careful div nesting. Tables, on the other hand, solve an awful lot of web page layout issues with little markup needed (especially back in the dark ages of Internet Explorer 6 or earlier).

Actually making the theme adapt to smaller screens turned out to be trivially easy - all I had to do was disable the min-width attribute on the HTML tag (ironically set in a class named "html-s2-no-adaptive"), and then add a media query so on smaller screens the main entry boxes cease to be fixed-width and just fill the screen. And now on a mobile the entry boxes should fit neatly into the screen, unless a giant image forces the box to grow in which case it'll only break the layout for one entry (at least this is what happens when testing with Firefox's responsive design mode). Sorted!

Since I was tinkering with the style anyway I fixed a few other minor niggles - the bottom-left corner of each post now also contains extra links like Add to Memories and Share, and the link bar at the top of all pages in my journal now once again has the "|" character between links (the S1 version of Generator I believe did this). It also won't wrap the text within a link because that's just silly.
Tags: livejournal, nablopomo
Subscribe
  • Post a new comment

    Error

    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments