Mobile horizontal break point disaster? How you do you guys do this?

VladyRahn · February 12, 2019, 8:01am

Hey guys,

I am having a huge dilemma here and I hope that I have missed something really simple. I am new to web design and have been learning Webflow for a few months now and loving it! But, here is what I can’t get my head around, why the mobile break point VH settings have NOTHING TO DO WITH THE VIEW PORT HEIGHT OF ACTUAL MOBILE DEVICES IN HORIZONTAL POSITION! This is beyond me. And this is what I mean by that…

So here I am, styling away the hero section for the mobile landscape break point on my website, I publish it, and everything is way out of whack! So I dig a bit deeper, and here is the problem. When you put an element in the mobile landscape break point, a hero section in my case, to 100 VH, the designer will actually use 100 VH of your desktops or laptops view port, not what the actual VH would be of a horizontally held mobile device, which is only like a few inches tall when held horizontally, versus many more on a desktop or laptop! This is beyond me guys. I absolutely love Webflow, but this destroys the whole purpose of a VISUAL DESIGNER if what you SEE on the canvas isn’t even remotely close to what you see on mobile devices, not?

So please, someone tell me I missed something because I wished this wasn’t real. I have seen Pixelgeek go through some content on his live YouTube streams of one of the older Webflow versions where they used to have a mask looking like an actual smart phone where you could really see what your website will look like on a mobile device. Well, maybe that mask is not necessary, but this needs to be real.

Also, I have just discovered, when you check for responsiveness for the mobile landscape break point, when you drag the bar left and right, there are dots on the bottom of the screen on the pixel ruler that display which type if devices this screen size will show on, there are actually no mobile phones shown there but rather larger handheld devices like Amazon Kindle, and Microsoft Surface Pro…???..on a smaller break point than tablets…

How do all of you web designers deal with this? Do you keep tweaking, publish, tweak, publish, tweak, publish…till what you see on real mobile devices actually looks like the design you want? Or is there another trick that I am missing? I really hope so. Would love to hear how you guys are styling the mobile break points, in regards to what you see in the designer versus what you actually see on real devices?

I really hope I missed something…

Thanks so much

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

vincent · February 12, 2019, 10:35am

What do you mean, especially with the horizontal position?

In the Designer, mobile breakpoint:

http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2019-02-12_11-31-03.png

On mobile:

And on mobile landscape:

http://vincent.polenordstudio.fr/snap/Monosnap_2019-02-12_11-34-10.png

Yep, sharing your read only link.

1 - On your site’s dashboard, click the Share icon:

http://vincent.polenordstudio.fr/snap/nqmwm.jpg

2 - Generate and Copy the link:

http://vincent.polenordstudio.fr/snap/gpto0.jpg

3 - Then edit your post here, and paste the link inside.

vincent · February 12, 2019, 10:37am

I think you do We’ll find how to help you. I need more to understand. Your read only link, captures of what happens and sketch of what you expect.

Don’t mind the devices listed in the rulers in the Designer, the lists are old anyway.

VladyRahn · February 12, 2019, 8:05pm

Hi @vincent ,

thanks so much for going through the effort to create these demonstrations, but perhaps I wasn’t clear enough in bringing my point across. Sorry about that, let’s try again.

With horizontal I basically mean mobile landscape, the way you would hold a phone to watch a video. You are correct by demonstrating that the VH values work on actual devices. But, my point is, that the VH values in the designer don’t match VH values on mobile devices. Here is what I mean…

Perhaps thinking about my point in aspect ratio would help. If you toggle the designer to Mobile Landscape, and set an element to 100 VH, it will use the complete view port height of the laptop or desktop you are designing on. But what is the actual view port height of a mobile device held in landscape mode? Therefor, what is the aspect ratio you see in the designer versus the aspect ratio on an actual mobile device in Mobile Landscape position?

Here is me trying to explain what I mean visually:

The blue arrows represent VH, designer versus my LG G7. The red arrows represent VW, designer versus my G7. If you compare the aspect ratio of the two, they aren’t even remotely close, as a matter of fact what you see in the designer looks more like a tablet held in portrait position. That basically means I cannot really design mobile landscape using VH, right? The orange rectangle shows what a depiction of mobile landscape should represent in the designer. Also, if you look at the background image, which is set to cover, covers the whole view port of my laptop vertically speaking, which is much taller than my phone in landscape mode. I hope this clarifies what I mean. I imagine that the reason this was done is to help the design process of these break points, but there needs to be some kind of a mask that actually represents the real size and aspect ratio of mobile devices, especially in preview mode.

I also just noticed by looking at the picture above, that I don’t actually get the mobile landscape view on my phone, it looks like it is actually tablet view, am I right? Why is that?

I also noticed that mobile view is doing funny things. As you can see I have set height to the section to Min 100VH, yet for some reason it looks like part of the next section is actually on top of the hero section. I must say I am not done designing mobile view yet but I can’t figure this one out. Here is what it looks like in the designer:

And here is what it looks like on my phone:

I have just started working on my music lesson website, that’s why I didn’t really want to put my share only link on here yet. But if you can help me with the questions I have, then here it is:

https://preview.webflow.com/preview/vrmusic?utm_source=vrmusic&preview=dcf0d123225ea9f5ca829c8bd8844167

Also @vincent, the screen shot you put into your reply showing VH values in mobile view, the VH values used to style the elements show up correctly in the designer in relation to the view port size of the designer. But, if you look at the total height of that versus an actual phone, it is quite a bit taller than a real device, especially in relation to it’s width, causing the aspect ratio to be off, hence making it impossible to actually style this properly visually, and requires to keep tweaking things in the designer to make things look right on a device while what you see in the designer is skewed.

Thanks so much

dram · February 12, 2019, 8:36pm

Hi Vlady,

yes, we understand what you are saying. I agree that it can be frustrating trying to imaging the actual mobile viewport instead of looking at an actual width-height combo but this is exactly how you design in desktop mode - you just don’t know what kind of screen your visitor will have. I design on my large designer monitor that has a screen that is 1200px high but my user will enter the site on macbook pro with something like measly 600px of vertical space. As a designer you just have to make sure your content is not specifically optimized to the most convenient screen size and ratio.

Another thing is, while designing at the “horizontal mobile” breakpoint you are not really designing exactly for that use-case! You are not designing for the small mobile device held in horizontal position, the only thing you are doing is designing for this specific width. That is all. The handy black dots at the bottom with the device names are telling you only about the horizontal pixel count for the vertically held device, they won’t tell you about the horizontally held devices.

I understand it can be hard at first to always keep in mind the fact that devices can and will be different all the time, but this is the point - you have to take into account every possible form factor, pixels density and amount.

The best way to check your layout is your browser’s inspector. So yes, publish and reload to check it out. You should not fixate on this one layout while designing, design for every occasion!

Now on a more practical note: your white section is actually happening because you set your background image to 80vh, which is exactly what it does now. Set it to cover and it will go away.