Site looks different on laptop than desktop

Design help General
1

I have no idea why my site looks great on desktop but different on laptop. The heights of my sections changed for some reason. HELPPPPPP

Here’s my site link…
https://preview.webflow.com/preview/coworkingspace-project?utm_source=coworkingspace-project&preview=02cc50a287c251fb3b00520db5bc46f8

2

Hi @mkh_develops

Had quick look at your site. I noticed that you have created sections using VH for Height, however, your Div’s (aboutusDiv) have used a min-height: 620px defined. These settings result in overflow issues into other elements on the smaller screen sizes, namely VH on a larger screen size will provide more ‘real estate’ for your elements to be spaced as you intended, however, on the smaller screen size (laptop) the VH won’t allow you to use the same real estate, but the aboutusdiv will still take up the same space on both screen sizes.

I suspect that this may also be reflected in other settings through the design…
Also just noticed that sections/wrappers are defined with VH height, and the children of those wrappers are also VH, perhaps try using %age Height for the children to keep proportional to their parents and use min-height settings for sections rather than defining a specific height which can cause overflow issues when child elements take up more space than define.

Hope that all makes sense!!?

3

YES! This makes a LOT of sense! Thanks so much!

4

So can I still use VH for the min-height ?

5

Or should I just use all percentage values ?

6

I think I got it! Never mind lol thanks!

8

Ok, there are quite a few things going at the same time.
I’m looking at your Hero section and I see that you are using Margin to to center your homeContainer at 249px. This will push everything down on a smaller screen.

Using Flexbox will be a much better way to align justify child elements.

9

Ok great! Thanks for that! I just fixed it with flexbox but now it’s stuck at the top. How do I bring it down from the top of the screen without using margin ?

10

Well I did absolute Full…that seemed to work

11

Flexbox is very powerful but has a lot of ‘Traps for young players!’ and can feel frustrating to get things how you want.

There are some really good resources in the Webflow University.

Have a look through these to see how you can achieve the design you want.

1 Like
13

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