Problem with centering text vertically on mobile browser

Design help General
1

Hello,

I have a problem centering the bottom “graphic design” text vertically on mobile home page (testing on iPhone Safari and Chrome). I’ve tried changing the overflow of the mobile flex parent from visible to hidden and position from static to fixed with no luck. Any suggestions on where the problem might be? Thanks a lot!

Here is my site Read-Only: https://preview.webflow.com/preview/sofia-pusa?utm_source=sofia-pusa&preview=f2ba0f8ed6cf615cae8feb5399799086
(how to share your site Read-Only link)

2

Please add screenshot of the problem (No way to answer like this). Thanks

3

45
45640×1136 358 KB

Here’s a screenshot of the problem. So in mobile view the text Graphic Design should be centered vertically inside the white box. It is only centered when scrolling so the problem might be caused by the browser bar? However, the home page should not be scrollable in the first place but it doesn’t help changing the mobile flex position to fixed.

4

Just to let you know that I decided to change the text positioning on the home page to avoid the centering problem (in case some of you wonder why the layout on my site’s read-only link looks different than in the screenshot). However, if someone knows the solution to this, would still be very interested in hearing your comments!
Thanks!

5

Hi Sofia,

The problem is that you gave the H1 element an align:top property

48
48482×564 21.6 KB

This property overrides the parent flex align: center property.

6

Thank you for replying, but please read my earlier post! I did this in purpose since I decided to change the layout when the centering did not work out. But despite of the H1 element being centered the problem still persists in Safari, not in Chrome for example. I’m pretty sure it’s related to this topic:
https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html