using % to center overlay on mobile and desktop

[marcdefiant]

Current Code: https://codepen.io/anon/pen/MmjQxz

I have been working with html/css/jQuery (with more than a basic knowledge of js) for awhile now and this confuses me. I have never tried to exclusively use percentages to center something like this as I have never horizontally centered content like this with a dynamic height.

When you load the pen, initially, you may see nothing. I had coded with this with mobile in mind which works fine, but is trash on both desktop view and more importantly landscape view on mobile. Narrowing the page will fix this (if you can get your height/width ratio right); this is the problem. I see the window ratio impacting where my content ends up.

I figure I could just add more code to my jquery to adjust this, but I feel that my current code or even my vision for going about what I am trying to accomplish exactly is flawed.

Again, I am a little confused

[Shikkediel]

I think the biggest issue here is that using a percentage for top margin might not be what you’d expect. The spec is such that the percentage will always relate to the width of the parent object. I’d go with a transform: translateY(-50%) instead.

[Atelierbram]

With the advice from above maybe also try using viewport-units in combination with using transforms, something like transform: translateY(50vh) .animate({marginTop: '-25vh'})

[Author]

Posts