Designed on 17" screen when viewed on 15" everything looks massive, what have I done wrong

Design help General
1

I have designed the site using my 17" screen.
When site is viewed on 15" screen. too much is being cut off at the bottom from the viewing area.
Is there a way to set the window to fit within a certain height?

2

Hello @lizharmer,

I neat trick I’ve found is to simply use the “vh” to set your section or div to a certain “View Height” of the devices screen.

So if you use 100vh as your height settings in the for a section, it will take up the full height view port. The “vw” uses the same principle but for “View Width” :smile:
I use it in many of my cloneable pieces. :smile: https://webflow.com/waldobroodryk

Let me know if you have any questions please. :smile:

Thank you,

Waldo

3

Thank you @Waldo_Broodryk

Can I confirm you mean put 100vh for height instead of % or auto?
And would I only put that in the Section setting? not each element right?

Thank you

4

Yes, instead of “%” or “Auto” you would use “vh”. You can put that on any item you’d like. It would help to see your website. Can you send a preview link of your website you are building?

Thank you,

Waldo

5

@Waldo_Broodryk its http://inspiredinteriorsanddesign.webflow.io/

I want the header and footer including home slider to be in full view in the window.
on my 17" is fine but 15" cuts off at subcribe form

6

Hey @lizharmer this is an issue that can be a bit of a pain at times, I design on a large screen and its easy to get carried away with all the lovely space. If you are using chrome you can quickly change the browser window resolution to get a better feel for the different screen sizes. Its a simple add on called Window Resizer. Gives you a bit more of a real worldy view when testing your sites at different screen dimensions.

7

Thanks so much @Godweeno ill definitely be checking that out.

Have you used the VH & VW settings to get around it?

If so is it meant to make up 100VH eg: 10VH Banner 80VH body 10VH footer if you want it all to be seen within the viewing window??

8

No worries! :smile:

My approach to this would be to make a section that will contain everything and give that 100VH. Then inside that section I would include the nav bar at the top and the footer positioned relatively at the bottom of the section. If you then set the nav and footer z-position value to be larger than any other content they will sit nicely on top and bottom of the screen. You can then include any content within the section you have created and position it accordingly to appear on each device.

If you stack them on top of each other with 10VH 80Vh and 10VH you can start to get some quirky results when viewed on various devices such as iPads and Phones. Things can spill outside and resize so it looks crushed etc.

Just as a caveat, this would be my approach to what you are trying to achieve, I’m sure some of the other webflow gurus might be able to offer some other alternatives. :wink:

1 Like
9

I would do exactly that with the 10vh, 80vh, 10vh, split. Whatever the ratios are to make it all fit into 100vh. :slight_smile:
Google inspector also has a mobile viewer option that has a mockup of all major devices and will so show you lol speeds and everything. Here’s a link to a tweet of mine on it: https://twitter.com/waldobroodryk/status/552654242356264961

1 Like
10

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