About

Michael Zucchi

 B.E. (Comp. Sys. Eng.)

Tags

android (44)
beagle (63)
biographical (83)
business (1)
code (57)
cooking (30)
dez (6)
dusk (30)
ffts (3)
forth (3)
free software (4)
games (32)
gloat (2)
globalisation (1)
gnu (4)
graphics (16)
gsoc (4)
hacking (417)
haiku (2)
horticulture (10)
house (23)
hsa (6)
humour (7)
imagez (28)
java (216)
java ee (3)
javafx (48)
jjmpeg (67)
junk (3)
kobo (15)
linux (5)
mediaz (27)
ml (15)
nativez (3)
opencl (117)
os (17)
parallella (97)
pdfz (8)
philosophy (26)
picfx (2)
playerz (1)
politics (7)
ps3 (12)
puppybits (17)
rants (134)
readerz (8)
rez (1)
socles (36)
termz (3)
videoz (6)
wanki (3)
workshop (3)
zedzone (14)
Sunday, 06 January 2019, 14:08

Media Queries

I made a small change to the HTML and CSS to try to render a bit better on phones. Even though the text is all resizeable and reflowable they rendered at some massive resolution and then scaled down - making the text unredable and non-reflowable. Sigh.

Anyway, first I added:

      <meta name='viewport' content='width=device-width, initial-scale=1'>
    

But this made the text too big and interfered with the table-like layout. I tried using a width of 800 which sort of worked but wasn't very readable either.

So I added a media query and adjusted some of the main sections and the borders and so on. It's just a quick and dirty but it works better than it did. I've only tested on one phone so others may not have changed.

    /* bloody phones */
    @media (max-width: 480px) {
        div#site-menu, .tag-menu {
            float: none;
            width: 100%;
        }
        .post-footer, .post, .post-header {
            margin-right: 1em;
        }
    }
  

On the other hand i'm lucky to get one visitor per week (lots of crawlers, and plenty of hacking attempts) so who really cares eh?

Tagged zedzone.
Copyright (C) 2018 Michael Zucchi, All Rights Reserved.Powered by gcc & me!