Mercurial > dottes
comparison web/css/dottes.css @ 636:3a71f1fe4c55
Rearrange instrument table from horizontal to vertical on narrow screens.
| author | Jim Hague <jim.hague@acm.org> |
|---|---|
| date | Mon, 07 Nov 2016 20:31:41 +0000 |
| parents | f9ed1b7953ca |
| children | 776a455efe47 |
comparison
equal
deleted
inserted
replaced
| 635:f9ed1b7953ca | 636:3a71f1fe4c55 |
|---|---|
| 108 } | 108 } |
| 109 | 109 |
| 110 div.dottes-transpose-instrument-how | 110 div.dottes-transpose-instrument-how |
| 111 { | 111 { |
| 112 width: 55%; | 112 width: 55%; |
| 113 text-align: left; | |
| 113 } | 114 } |
| 114 | 115 |
| 115 div.dottes-transpose-tune-types | 116 div.dottes-transpose-tune-types |
| 116 { | 117 { |
| 117 width: 30%; | 118 width: 30%; |
| 119 text-align: center; | |
| 118 } | 120 } |
| 119 | 121 |
| 120 div.dottes-tune-display | 122 div.dottes-tune-display |
| 121 { | 123 { |
| 122 } | 124 } |
| 376 { | 378 { |
| 377 margin-top: 20px | 379 margin-top: 20px |
| 378 } | 380 } |
| 379 | 381 |
| 380 @media only screen and (max-device-width: 480px) { | 382 @media only screen and (max-device-width: 480px) { |
| 383 div.dottes-transpose-instrument-item | |
| 384 { | |
| 385 display: table-row; | |
| 386 vertical-align: middle; | |
| 387 text-align: center; | |
| 388 padding: 0px; | |
| 389 margin: 0px; | |
| 390 } | |
| 391 | |
| 392 div.dottes-transpose-instrument-item h1, p, ul | |
| 393 { | |
| 394 text-align: center; | |
| 395 margin: 0px; | |
| 396 padding: 0px; | |
| 397 } | |
| 398 | |
| 381 div.dottes-tune-footer | 399 div.dottes-tune-footer |
| 382 { | 400 { |
| 383 } | 401 } |
| 384 | 402 |
| 385 div.dottes-tune-footer-links-column | 403 div.dottes-tune-footer-links-column |