Highlighted

Vertical alignment on i-Phone

Engaged ,
Sep 17, 2019

Copy link to clipboard

Copied

Hi,

 

Clicking the far-right icon in <header> opens Contact Me 2.

 

I am positioning the box in <main> without header and footer.

 

Alignment looks fine on laptop.

But there is an issue of vertical alignment on iPhone.

 

Is there any solution?

 

https://naughty-saha-34bd1d.netlify.com/

 

Hosun Kang

 

Q_Dw_86_php.png

 

Hi Hosun,

 

The link Ben provided should give you an idea.

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

 

In your case add the css calc solution to the page-wrapper css:

 

 

.page-wrapper {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

 

 

Then add the javscript at the foot of the page just before the closing </body> tag:

 

 

<script>
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
</script>

 

 

 

See if that does anything!

 

Views

199

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Vertical alignment on i-Phone

Engaged ,
Sep 17, 2019

Copy link to clipboard

Copied

Hi,

 

Clicking the far-right icon in <header> opens Contact Me 2.

 

I am positioning the box in <main> without header and footer.

 

Alignment looks fine on laptop.

But there is an issue of vertical alignment on iPhone.

 

Is there any solution?

 

https://naughty-saha-34bd1d.netlify.com/

 

Hosun Kang

 

Q_Dw_86_php.png

 

Hi Hosun,

 

The link Ben provided should give you an idea.

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

 

In your case add the css calc solution to the page-wrapper css:

 

 

.page-wrapper {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

 

 

Then add the javscript at the foot of the page just before the closing </body> tag:

 

 

<script>
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
</script>

 

 

 

See if that does anything!

 

Views

200

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 17, 2019 0
LEGEND ,
Sep 17, 2019

Copy link to clipboard

Copied

Hi Hosun,

Can you try the below code option. After that I've run out of ideas why the iPhone when using Flex won't show the vertically positioning correctly. What browser is it you are using?

 

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contact Me 2</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.page-wrapper {
display: flex;
flex-direction: column;
height: 100vh;
} 

main {
background-color: lightcoral;
display: flex;
flex: 1;
}
.test {
align-self: center;
width: 60%;
margin: 0 auto;
text-align: center;
background-color: #008080;
padding: 160px 0;
}
</style>
	
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div class="page-wrapper">
<main>
<div class="test">Contact Me 2</div>
</main>
</div>
</body>
</html>

 

 

 

The only other thing I can think of is the iPhone doesnt like the height: 100vh on the page-wrapper css;

 

So you could test with:

 

body {
height: 100%;
}
html {
height: 100%;
}

.page-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0
Adobe Community Professional ,
Sep 17, 2019

Copy link to clipboard

Copied

The problem is the tool bar(s). Have a look at

 

68747470733a2f2f6b6574746c652d6d6f64756c65732e73332e616d617a6f6e6177732e636f6d2f696f732d696e6e65722d6865696768742f696f732d312e706e67.png

 and

68747470733a2f2f6b6574746c652d6d6f64756c65732e73332e616d617a6f6e6177732e636f6d2f696f732d696e6e65722d6865696768742f696f732d322e706e67.png

Using window.innerHeight in a javascript function should solve the problem.

 

Edit: Forgot this on my OLD iphone:

IMG_2350.JPG

 

Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 1
LEGEND ,
Sep 17, 2019

Copy link to clipboard

Copied

Ben, does this just apply if you use 100vh or would setting the height of the container to 100% resolve the issue?

 

 

I found the below but without an iPhone to make some tests it makes little sense to me:

https://medium.com/@susiekim9/how-to-compensate-for-the-ios-viewport-unit-bug-46e78d54af0d

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0
Adobe Community Professional ,
Sep 17, 2019

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0
Adobe Community Professional ,
Sep 17, 2019

Copy link to clipboard

Copied

osgood_ (LEGEND) (looks and sounds great), this does my head in. Never realised this problem, probably because I have not worried about vertically centring anything. There are lots of discussions on the topic that I have now discovered and I doubt that 100% will resolve the problem.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0
Adobe Community Professional ,
Sep 17, 2019

Copy link to clipboard

Copied

osgood_ (LEGEND)!

 

Still trying to get my head around this new forum with replies disappearing before my eyes.

 

However, to further the discussion regarding 100% vs 100vh, I do not think that this is the crux of the problem. The problem is that the viewport is partly hidden by the toolbar. Aparently, this has been done on purpose, initially adopted by Safari and subsequently copied by the other mobile browsers.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0
LEGEND ,
Sep 17, 2019

Copy link to clipboard

Copied

I didn't know the issue existed on iPhone either. Not had any clients complain to-date so what will be will be, I guess. I'm positive I have used 100vh and vertically centered containers - maybe next time I will include the js work-around solution as a precaution. It's mainly a cosmetic issue, I think, so its not likely that a client would complain, plenty of other weird stuff going on out there!

 

More 'leg-end' than 'legend'.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0
Engaged ,
Sep 17, 2019

Copy link to clipboard

Copied

Hi, Thank you very much for your help. I think setting "window.innerHeight" for my iPhone would solve my issue, rather than adding your code. Could you tell me how to do? I guess every iPhone has a different value. Housn Kang

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0