tweak css for iPhone

This commit is contained in:
Sami Samhuri 2010-11-26 23:21:41 -08:00
parent f561617d6c
commit f7ee905181
2 changed files with 38 additions and 27 deletions

View file

@ -37,8 +37,7 @@ h4 { margin: 0.5em 0 0.7em }
}
@media only screen and (max-device-width:480px) {
#info { width: 80%
; max-width: 400px
#info { width: 70%
; padding: 0 1em
}
@ -47,5 +46,6 @@ h4 { margin: 0.5em 0 0.7em }
; max-width: 100%
; padding: 0.5em 0.2em 1em
; border-left: none
; font-size: 1em
}
}

View file

@ -19,18 +19,6 @@ h2 { text-align: center
; padding: 0
}
ul { text-align: center
; margin: 0 auto
; padding: 1em
; border: solid 1px #ccc
; width: 90%
; max-width: 950px
; background-color: #fff
; border-radius: 20px
; -webkit-border-radius: 20px
; -moz-border-radius: 20px
}
a { color: #22a
; text-decoration: none
; border-bottom: dashed 1px #22a
@ -45,6 +33,18 @@ a.up { font-size: 1.5em
; text-decoration: underline
}
ul { text-align: center
; margin: 0 auto
; padding: 1em
; border: solid 1px #ccc
; width: 90%
; max-width: 950px
; background-color: #fff
; border-radius: 20px
; -webkit-border-radius: 20px
; -moz-border-radius: 20px
}
li { display: inline
; font-size: 2em
; margin: 0
@ -92,31 +92,42 @@ td:nth-child(2) { padding: 0 10px }
}
/* iPad (landscape) */
@media only screen and (orientation:landscape) and (device-height:1024px) {
h1 { font-size: 2em }
li { font-size: 1.5em }
a.up { font-size: 1.2em }
}
/* iPhone and iPad */
@media only screen and (orientation:portrait) and (device-height:1024px),
only screen and (max-device-width:480px)
{
h1 { font-size: 2em }
a.up { font-size: 1.2em }
ul { padding: 0.5em
; width: 70%
; max-width: 900px
; max-width: 400px
}
li { display: block
; margin: 0.7em
; margin: 0.7em 0.7em 1em
; font-size: 1.5em
}
li:after { content: '' }
}
/* iPhone */
@media only screen and (max-device-width:480px) {
h1 { font-size: 2em
; margin-top: 1em
}
h2 { font-size: 1em }
a.up { font-size: 0.8em }
li { font-size: 1.2em }
td { font-size: 1em
; line-height: 1.1em
}
#sjs { font-size: 1em }
#forkme { display: none }
}