Align splash screen vertically

[HexTree]

The splash screen menu is aligned to the top of the page. I can't figure out how to get it to appear in the centre, vertically (or whether it's possible). Ideally the button would be in the dead centre, and the images directly above and below.

How it currently is:

How I would like it:

[sayyari]

add to the login class in index.css the attribute position: absolute; or pad it from above by top: XX% or XXpx;

…

On Jan 25, 2017, at 8:49 PM, HexTree ***@***.***> wrote: The splash screen menu is aligned to the top of the page. I can't figure out how to get it to appear in the centre, vertically (or whether it's possible). Ideally the button would be in the dead centre, and the images directly above and below. How it currently is: <https://cloud.githubusercontent.com/assets/7933725/22302415/cad13bc2-e33f-11e6-8726-c1523023d7fc.png> How I would like it: <https://cloud.githubusercontent.com/assets/7933725/22302423/d07054dc-e33f-11e6-96db-fb02922a228c.png> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#33>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIKhQ14QrLKuJJodlF17CgQoS0xLN9Ngks5rV4tDgaJpZM4Ltyw2>.

[HexTree]

login class is already absolute

I'll try padding, by %. With px I figured it would not guarantee to be the same on devices of different sizes.

[sayyari]

Then remove the top and bottom padding that already exists. on my phone the login page spans more than the whole page so if you pad it it will go down. Keep that in mind.

…

On Jan 25, 2017, at 10:07 PM, HexTree ***@***.***> wrote: login class is already absolute I'll try padding, by %. With px I figured it would not guarantee to be the same on devices of different sizes. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#33 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIKhQ5eORv_3CleqhFMipomTi7Ohc2Otks5rV519gaJpZM4Ltyw2>.

[HexTree]

Maybe I also need to limit the heights of the images. I wanted it to be all in one page, so no need to scroll.

[sayyari]

Don’t limit the images, leave them to be dynamic. I suggest padding from the sides if you feel that they’re big, otherwise the button below will grow bigger.

…

On Jan 25, 2017, at 10:11 PM, HexTree ***@***.***> wrote: Maybe I also need to limit the heights of the images. I wanted it to be all in one page, so no need to scroll. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#33 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIKhQ1G4PpeO-YF9fobD19iS3XNJwSUrks5rV553gaJpZM4Ltyw2>.

[HexTree]

Ah, I think I discovered the issue. I shouldn't be using attributes like height and width for svg images, instead viewbox as per this guide: https://css-tricks.com/scale-svg/

Without a viewbox, the images don't seem to respect the boundaries of their parent div.

[sayyari]

If you have so much time detailing, why don't you make the pages look like the slides we agreed on if you haven't. On Thu, Jan 26, 2017, 12:49 AM HexTree <notifications@github.com> wrote: Ah, I think I discovered the issue. I shouldn't be using attributes like height and width for svg images, instead viewbox as per this guide: https://css-tricks.com/scale-svg/ — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#33 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIKhQ1z23DUqpJPlQvx-ThUp6h0wXSdSks5rV8N8gaJpZM4Ltyw2> .

[HexTree]

That's what I'm doing, but the first step is to get the page to actually appear central.

[sayyari]

Cool, make sure you're changing the right classes. I suggest header and footer images with dynamic sizes.

…

On Thu, Jan 26, 2017, 12:59 AM HexTree ***@***.***> wrote: That's what I'm doing, but the first step is to get the page to actually appear central. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#33 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIKhQ_OTwCx8Tqs0dL0TI-ldEz3yHUn0ks5rV8W8gaJpZM4Ltyw2> .