Permalink
Browse files

CSS: Make the title in headers more responsive

Titles in headers always have a margin left/right of 30% which is a lot for headers without buttons or with icon only buttons.
This PR adds two rules make the margins more responsive.

**Limitations:**
No support for old IE and WP7
The markup for links and the title has to be in the right order to support smaller margins for text only buttons (if not, standard margins will be used).
(The docs unfortunately do not)

**Demo:**
http://jsfiddle.net/MauriceG/pxFga/show/light/ (edit: http://jsfiddle.net/MauriceG/pxFga/)
  • Loading branch information...
MauriceG committed Sep 10, 2012
1 parent d07f1b5 commit 2b883a9ca247a150175665906efb7e32a6c202e5
Showing with 2 additions and 0 deletions.
  1. +2 −0 css/structure/jquery.mobile.core.css
@@ -56,6 +56,8 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-footer .ui-btn-icon-notext,
.ui-header .ui-btn-icon-notext { top: 6px; }
.ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 30% .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
+.ui-header .ui-title:only-child { margin: .6em .8em .8em; }
+.ui-header .ui-btn-icon-notext + .ui-title:last-child, .ui-header .ui-btn-icon-notext ~ .ui-title:first-child { margin: .6em 2.5em .8em; }
.ui-footer .ui-title { margin: .6em 15px .8em; }
/*content area*/

0 comments on commit 2b883a9

Please sign in to comment.