Skip to content
This repository

CSS: Make the page title in headers more responsive #4973

Closed
wants to merge 1 commit into from

3 participants

Maurice Gottlieb Todd Parker Jasper de Groot
Maurice Gottlieb

Titles in page headers always have a left/right margin of 30% for add slots for the header buttons.
This is a lot for headers without buttons or with icon only buttons.
This PR adds two rules to 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).

Demo:
http://jsfiddle.net/MauriceG/pxFga/show/light/ (edit: http://jsfiddle.net/MauriceG/pxFga/)

Maurice Gottlieb MauriceG 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/)
2b883a9
Todd Parker

Thanks @MauriceG, looks good. I'll do some testing...

Jasper de Groot
Collaborator

@MauriceG

Although I like the idea to give the title some more space, this CSS is not correct so I am closing this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Sep 10, 2012
Maurice Gottlieb MauriceG 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/)
2b883a9
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 2 additions and 0 deletions. Show diff stats Hide diff stats

  1. +2 0  css/structure/jquery.mobile.core.css
2  css/structure/jquery.mobile.core.css
@@ -56,6 +56,8 @@ div.ui-mobile-viewport { overflow-x: hidden; }
56 56 .ui-footer .ui-btn-icon-notext,
57 57 .ui-header .ui-btn-icon-notext { top: 6px; }
58 58 .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; }
  59 +.ui-header .ui-title:only-child { margin: .6em .8em .8em; }
  60 +.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; }
59 61 .ui-footer .ui-title { margin: .6em 15px .8em; }
60 62
61 63 /*content area*/

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.