Mobile layout consistency issues

Design help General
1

Hi Community,

I’m having a hard time with my client’s mobile layout:
It looks fine in the designer at 375px - which is my client’s two iphones size: iPhone X and iPhone 8

375px_mobile_view_in_Designer
375px_mobile_view_in_Designer631×941 114 KB

But please see how it actually renders on their phone with Safari and Firefox:

  1. The “Moon Sisters Retreat Ibiza” until “Mehr Informationen” button div block touches the Moon Sisters logo on their devices.
    ( “mobile-banner1” div block in the “section-home-hero” section - set to absolute positioning with % - if you open the read-only link in the designer)

  2. The bottom tagline “Wild und frei. Intuitiv. Einzigartig. So wie Du.” does not stay completely at the bottom on Firefox, though I use margin-top: auto on its parent div (“hero-tagline-flex” div in the same section)

I’m using a height of 100VH for the whole section.

Safari

safari Jasmin
safari Jasmin709×1536 123 KB

Firefox

firefox jasmin
firefox jasmin709×1536 132 KB

Any help much appreciated :pray:t3:
Thank You!

Here is my site Read-Only: Webflow - jasminmorssy.com

Here is the published sub-domain link: https://jasminmorssy.webflow.io/

2

Hi @Steph_P5 ,

  1. The problem is not from the different browsers, it’s from the window height.
    every browser has its own bars sizes affecting the available window height ( + every specific device has its own screen dimensions).
    If you will take a look in DevTools responsive view tool, you will
    see those div’s are intersecting when you shrink the window height.
    The reason for it is the “mobile-banner1” absolute positioned 33vh from the top. when the window is short, the 33vh defined will make it appear on top of that logo.
    change “mobile-banner1” to “static” and put it above “hero-tagline-flex” div.
    That way, no matter what the screen height is, it will stay under the logo.

  2. 100vh is the total height including the browser’s bar. Using it in the Hero section (start), where the bar is visible, will hide the bottom portion of that section.
    To avoid that, use 100% height instead (100% = window height without the bar height).
    Don’t forget to give the body a height of 100% as well for it to stretch properly.

  3. There’s an overflow issue (horizontal scrollbar) on the page.
    from what I see you’re using 100vw (26 times). 100vw is the window width including the scroll bar. 100% width is much preferred. if you still need to use 100vw, just make sure its container/wrapper as an “Overflow: none” to stop it from overflowing the page.

Video capture

Hope it helps…

1 Like
3

Hi @11149 Shay,

It works!
Thank you SO MUCH for taking the time and providing such helpful and detailed explanation/video/answer.
It’s very much appreciated

One last question if I may:
What would you recommend to have the Moon Sisters logo and the mobile-banner1 text automatically scale down on smaller screen sizes (iPhone 6/7/8 vs iPhone X for example)?
I tried different CSS units (em,rem,%,VH,VW, CH) on both wrappers and text blocks but could not reach consistency.
Thank you again :pray:t3:

4

Great job Stephane!
The layout looks great! no overflow and everything is perfectly aligned and in place.
I would keep the logo & banner as is (fixed dimensions).
I personally think it looks great in every mobile dimension.

But if you want to make the logo fluid, and resize by the screen dimension, I would use min/max width to achieve it. as an example, the logo could be - width:34vh (so it shrinks/grow according to screen height) and max-width: 80vw to stop it from growing too large).
you can play with the width & min/max width with different CSS units to accomplish fluid yet restricted sizes.
But I think, at least the banner text (font size), should stay in non-fluid units (px/em/rem). I would usually use vw/vh on text only if it’s a text as a graphic design and not really content. if a content text must be fluid, I would resort to a custom css that uses a fluid & non-fluid unit together to get the exact font size I need.
“calc” (calculates +/-/*) or “clamp” (size value with min & max values).
for example:

 <style>
 .className {
  font-size: calc(1rem - 2vw);
 }  
 </style>

 <style>
 .className {   /*  (Min, Value, Max)  */
  font-size: clamp(14px, 1rem + 2vw, 2vh);
 }  
 </style>

An article about fluid typography (using calc & clamp):
css-tricks - simplified fluid typography

But just saying my 2 cents :slight_smile: , I think it looks really awesome as it is right now.
Best wishes!

1 Like
5

Wow!
I’m really humbled by your kindness and CSS knowledge, @11149 Shay.
I must confess I never heard of “calc”, “clamp”, or the possibility to mix different units in the same rule.
I will read CSS Tricks and MDN more often from now on :wink:
As someone who used to “build” websites with Wordpress page builders, this first Webflow project has been a wake-up call in gaining real CSS (and js) knowledge.
I find it to be a fantastic way to deeper understand the concepts - by doing, while being seriously helped by the brilliant designer interface.
And the feedback of experienced people like you in the community makes it an awesome ecosystem.
I really hope I’ll be able to give back one of these days!
Best wishes to you as well!

6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.