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
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
...
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%;
}
Copy link to clipboard
Copied
The problem is the tool bar(s). Have a look at
and
Using window.innerHeight in a javascript function should solve the problem.
Edit: Forgot this on my OLD iphone:
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
Copy link to clipboard
Copied
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.
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.
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'.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
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!