404.html: better content vertical alignment #1567

EvgenyOrekhov · 2014-07-27T17:29:12Z

Content vertical alignment using display: table for <html> and display: table-cell for <body>.
That way one can modify the content and don't worry about readjusting the margin.

Content vertical alignment using display: table for <html> and display: table-cell for <body>.

Ref: http://php.net/manual/en/features.commandline.webserver.php Close: #1569.

drublic · 2014-07-30T18:35:25Z

Thanks for this PR, @EvgenyOrekhov.
I've tested this in IE8 and other browsers we support and it works perfectly. We should reset display: table on html for mobile browsers too, I think. Everything else looks pretty perfect to me.
You could add a note about this in CHANGELOG.md.

Update `CHANGELOG.md`

EvgenyOrekhov · 2014-07-30T19:15:43Z

@drublic done

…to 404-centrify Conflicts: CHANGELOG.md

EvgenyOrekhov · 2014-07-30T19:33:38Z

@drublic, did I mess something up? Sorry, I'm new to Git and GitHub.

alrra · 2014-07-31T01:55:41Z

did I mess something up? Sorry, I'm new to Git and GitHub.

@EvgenyOrekhov don't worry, if it's going to be merge, we'll handle it!

IMHO it looks better when the second line isn't so long (maybe add something like p{ ...; margin: auto; width: 280px; }?).

Note(s):

Don't know how useful this change is since the 404 is intended to be a placeholder page that users should replace with their own.
It will not "work" with IE6/7 since they don't support CSS Table displays (reason why display: table wasn't used in the first place + the original idea was to also support them) => v4 shouldn't get this

…to 404-centrify

EvgenyOrekhov · 2014-07-31T06:43:33Z

@alrra I set width to 310px to make sure the word "view" stays on the first line in mobile browsers.

I liked the new 404 page, so I kept using it as it is in my projects, but I kept struggling with proper vertical alignment when I localized the page, so I suggested some h5bp users would also benefit from this change.

P. S. Am I doing it right? I should commit, then git pull upstream master, then git push origin <topic-branch-name>, right? Not git pull --rebase?

arthurvr · 2014-07-31T07:01:30Z

Don't know how useful this change is since the 404 is intended to be a placeholder page that users should replace with their own.

@alrra I do think some of the users never touch the 404 page layout. Some just change/translate the text. For those users it will be better if we use this technique for vertical centering. With the technique we use right now the vertical alignment will break for them.

alrra · 2014-07-31T07:42:34Z

I set width to 310px to make sure the word "view" stays on the first line in mobile browsers.

@EvgenyOrekhov thanks, will check as soon as I get home.

P. S. Am I doing it right? I should commit, then git pull upstream master, then git push origin , right? Not git pull --rebase?

@EvgenyOrekhov After you make your changes and staged them, you can just amend the commit (git commit --amend), and then just force push on your topic branch, in this case to 404-centrify (git push -f origin 404-centrify)

I highly recommend: Pro Git.

I liked the new 404 page, so I kept using it as it is in my projects, but I kept struggling with proper vertical alignment when I localized the page, so I suggested some h5bp users would also benefit from this change.

I do think some of the users never touch the 404 page layout. Some just change/translate the text. For those users it will be better if we use this technique for vertical centering. With the technique we use right now the vertical alignment will break for them.

@EvgenyOrekhov, @arthurvr good to know that people are actually building upon it!

EvgenyOrekhov · 2014-07-31T08:09:18Z

@alrra thanks, I thought "do not rewrite public history" is a strict rule.

alrra · 2014-07-31T08:11:14Z

I thought "do not rewrite public history" is a strict rule.

@EvgenyOrekhov yes, when it comes to the master branch

404.html

@@ -33,11 +33,18 @@

        p {
            line-height: 1.2;
+            margin: auto;
+            width: 310px;
        }

        @media only screen and (max-width: 270px) {


alrra · 2014-07-31T13:00:12Z

@EvgenyOrekhov played a little bit and ended by with this.

How it looks (some examples):

Device/OS (Browser) Screenshot

Mac / OS X (Firefox)

PC / Windows XP (IE 6/7)
(looks pretty decent)

iPad / iOS (Safari)

Samsung Galaxy S III / Android (Chrome)

The different in size compared to the old 404 is negligible

old 404:

original size:         1242 B
gzipped size:           574 B

new 404:

original size:         1274 B
gzipped size:           570 B

Roope · 2014-07-31T13:03:33Z

Looking good!

EvgenyOrekhov · 2014-07-31T14:22:06Z

@alrra nice, but it would be even nicer if the line break appeared right after "view", so it could be like

Sorry, but the page you were trying to view
does not exist.

Don't you think?

alrra · 2014-07-31T16:00:12Z

Note: I've improved the page a little bit more (my previous comment has been updated).

would be even nicer if the line break appeared right after "view"

@EvgenyOrekhov personally I find it nicer the way it is now. :)

EvgenyOrekhov · 2014-07-31T16:55:47Z

@alrra, applied your changes.

Since some of the users prefer to just modify the placeholder 404 page instead of replacing it with their own, this commit makes it easier to do that by allowing them to modify the content without worrying about readjusting the margins. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Note: The different in size compared to the old 404 is negligible: * old 404: original size: 1242 B gzipped size: 574 B * new 404: original size: 1274 B gzipped size: 570 B - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Ref: #1567. Close: #1567.

alrra · 2014-07-31T18:35:45Z

Merged in c3a72ff.

Thanks @EvgenyOrekhov and congrats on your first HTML5 Boilerplate contribution! 🎉 👏

EvgenyOrekhov · 2014-08-01T14:33:39Z

Thanks everyone! You made a great first impression of GitHub community!

Since some of the users prefer to just modify the placeholder 404 page instead of replacing it with their own, this commit makes it easier to do that by allowing them to modify the content without worrying about readjusting the margins. Ref h5bp/html5-boilerplate#1567 Close #219

Since some of the users prefer to just modify the placeholder 404 page instead of replacing it with their own, this commit makes it easier to do that by allowing them to modify the content without worrying about readjusting the margins. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Note: The different in size compared to the old 404 is negligible: * old 404: original size: 1242 B gzipped size: 574 B * new 404: original size: 1274 B gzipped size: 570 B - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Ref: h5bp/html5-boilerplate#1567. Close: h5bp/html5-boilerplate#1567.

EvgenyOrekhov and others added 2 commits July 27, 2014 21:11

404.html: better content vertical alignment

b644429

Content vertical alignment using display: table for <html> and display: table-cell for <body>.

Docs: Add information about PHP's built-in server

8351030

Ref: http://php.net/manual/en/features.commandline.webserver.php Close: #1569.

drublic added this to the 5.0.0 milestone Jul 30, 2014

404.html: reset display: table on html for mobile

32d7968

Update `CHANGELOG.md`

Merge branch 'master' of https://github.com/h5bp/html5-boilerplate in…

adb70f7

…to 404-centrify Conflicts: CHANGELOG.md

EvgenyOrekhov added 2 commits July 31, 2014 10:17

404.html: set p width to 310 px

d6ca3ea

Merge branch 'master' of https://github.com/h5bp/html5-boilerplate in…

07400a8

…to 404-centrify

alrra reviewed Jul 31, 2014
View reviewed changes

404.html: style fine-tuning

040673e

alrra closed this Jul 31, 2014

EvgenyOrekhov deleted the 404-centrify branch August 2, 2014 08:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

404.html: better content vertical alignment #1567

404.html: better content vertical alignment #1567

EvgenyOrekhov commented Jul 27, 2014

drublic commented Jul 30, 2014

EvgenyOrekhov commented Jul 30, 2014

EvgenyOrekhov commented Jul 30, 2014

alrra commented Jul 31, 2014

EvgenyOrekhov commented Jul 31, 2014

arthurvr commented Jul 31, 2014

alrra commented Jul 31, 2014

EvgenyOrekhov commented Jul 31, 2014

alrra commented Jul 31, 2014

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

alrra commented Jul 31, 2014

Roope commented Jul 31, 2014

EvgenyOrekhov commented Jul 31, 2014

alrra commented Jul 31, 2014

EvgenyOrekhov commented Jul 31, 2014

alrra commented Jul 31, 2014

EvgenyOrekhov commented Aug 1, 2014

404.html: better content vertical alignment #1567

404.html: better content vertical alignment #1567

Conversation

EvgenyOrekhov commented Jul 27, 2014

drublic commented Jul 30, 2014

EvgenyOrekhov commented Jul 30, 2014

EvgenyOrekhov commented Jul 30, 2014

alrra commented Jul 31, 2014

EvgenyOrekhov commented Jul 31, 2014

arthurvr commented Jul 31, 2014

alrra commented Jul 31, 2014

EvgenyOrekhov commented Jul 31, 2014

alrra commented Jul 31, 2014

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

alrra commented Jul 31, 2014

Roope commented Jul 31, 2014

EvgenyOrekhov commented Jul 31, 2014

alrra commented Jul 31, 2014

EvgenyOrekhov commented Jul 31, 2014

alrra commented Jul 31, 2014

EvgenyOrekhov commented Aug 1, 2014