• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Vertical alignment on i-Phone

Enthusiast ,
Sep 17, 2019 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

 

Views

526

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
community guidelines

correct answers 1 Correct answer

LEGEND , Sep 17, 2019 Sep 17, 2019

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 
...

Votes

Translate

Translate
LEGEND ,
Sep 17, 2019 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%;
}

Votes

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
community guidelines
Community Expert ,
Sep 17, 2019 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

 
Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
LEGEND ,
Sep 17, 2019 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

 

Votes

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
community guidelines
Community Expert ,
Sep 17, 2019 Sep 17, 2019

Copy link to clipboard

Copied

I just found this work around https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Expert ,
Sep 17, 2019 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.

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Expert ,
Sep 17, 2019 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.

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
LEGEND ,
Sep 17, 2019 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'.

Votes

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
community guidelines
Enthusiast ,
Sep 17, 2019 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

Votes

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
community guidelines
LEGEND ,
Sep 17, 2019 Sep 17, 2019

Copy link to clipboard

Copied

LATEST

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!

 

Votes

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
community guidelines