Responsive Layout - large screen

Hi,

I have a design layout (1920X1080)

the big container of the nav bar and logo is 1640px (red)
and the content container is 1364px (pink)
I try to do it responsive at all desktop screens, i used percentage for divs
and even vw&vh at another version (fonts was so tiny :frowning:)
so the largest screen looking good but i have little problems with another screens…
I want to keep the formatting like on the wide screen, I don’t mind having a little more white space between the image and the bottom area (where i have the name of the founders etc…)

thanks!


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

Can you clarify or rephrase what exactly you want to achieve?

Maintain the same proportions on all screens on the desktop as on the wide screen. Maybe the container is too wide? I’m trying to figure out how to stand the items well on standard desktop screens that aren’t wide

You can use full height container inside of which you will add your hero section and position it absolutely in relative units.

Okay, I made two choices
One option translates all pixel dimensions to vh and vh

option 1:
https://preview.webflow.com/preview/f2vc?utm_medium=preview_link&utm_source=designer&utm_content=f2vc&preview=9d2f7ad9efecdf0ead30209fa9c06d95&mode=preview

what do you think? It seems fine to me, but the texts may be too small on a small desktop screen

In the second option I made layout in pixels only, the problem is that in the designer I see the image well and then when I publish, the image looks too big and slides down a bit

option 2
https://preview.webflow.com/preview/f2vc-b5bef1f9e469314580fd-6bb4e87edd8c6?utm_medium=preview_link&utm_source=designer&utm_content=f2vc-b5bef1f9e469314580fd-6bb4e87edd8c6&preview=2feca41bc44bfdca0a2e26f2f5af0595&mode=preview