3 ms·
I spent an hr hacking away at this no-class, no id, table within a table within a table layout. I didn't make the fonts scale to mobile screen ratio because I
by faramarz 14y ago
I spent an hr hacking away at this no-class, no id, table within a table within a table layout.
I didn't make the fonts scale to mobile screen ratio because I know a lot of people like to have the ability to pinch in and out.
PG, if you're reading this, all you have to do is dump this at the bottom of your css file.
@media (max-width: 740px) {
body { padding: 0; margin: 0; width: 100%; }
body table{ width:100%; }
body table tr td:nth-child(1n+0) table:nth-child(1) tr:nth-child(1) td:nth-child(even) .pagetop {
position: absolute; top: 4px; left:30px; z-index:100; width: 100%; text-align: left; }
body table tr td:nth-child(1n+0) table:nth-child(1) tr:nth-child(1) td:nth-child(odd) .pagetop {
position: absolute; top: 45px; left:30px; z-index:100;text-align: left; color: #fff;}
body table tr td:nth-child(1) { height: 70px; vertical-align:top; padding: 1px;}
body table tr td:nth-child(1) td:nth-child(1) { height: auto; padding: 0;}
textarea { width: 100%; }
.pagetop { color: #ff6600; }
.pagetop b { display: block; float: left; clear: both; width: 100%; margin-bottom:4px }
.pagetop a { display: block; margin-right: 10px;float: left; }
body img {width: 20px; height: 20px; }
body img:after { display: block;color:#000; font-size: 20px;}
pre {max-width: 100%; width: 300px; word-wrap:break-word; overflow: auto; }
a {word-wrap:break-word; }
}
End result is this:
https://www.dropbox.com/s/t2893r570ef429t/hn-css.jpg https://www.dropbox.com/s/t2893r570ef429t/hn-css.jpg
- jQueryIsAwesome 14y agoMe too; arrows are just CSS to avoid pixelation. The code can be found here: https://gist.github.com/AltIvan/5243025 https://gist.github.com/AltIvan/5243025 It looks like: http://i.imgur.com/iYrfuOf.png http://i.imgur.com/iYrfuOf.png I know that the login button disappeared but it ask you to login in when you try to reply, up-vote or submit.
- faramarz 14y agoLove the css work. Much more efficient way of targeting. Thanks for sharing, I'm taking some cues from this.
- dbaupp 14y agoThis is awesome! Although Firefox seems to ignore media queries that don't have a medium type (just using `@media all and (max-...) { .. }` fixes that though), and using the prefix search of `a[id^="up_"]` is probably more efficient than the full substring search of `id*="up_"`.
- jQueryIsAwesome 14y agoFixes done.