Width too wide? Not responsive at all? Different on smaller screens

Design help General
1

Hi,so Im trying to recreate a prototype of this website on webflow- Login | InVision
This is the very first time Im working with Webflow first of all, so I was really happy with my result at first, only to find out when I published it that:

  1. Something is breaking the site as you can scroll it to the left/right and I still hasnt figured out how to fix it.

  2. I tried to send out the link to multiple people to make sure it works on others desktops as well, only to find out that on smaller screens it looks rather messy.

As I am aware, the problem is with the resolutions ? Is there any way this can be fixed and if yes what would you suggest? :slight_smile: I would appreciate it a lot!

Thank you!

Here is my site : ** https://czech-platform.webflow.io/ **

https://preview.webflow.com/preview/czech-platform?utm_medium=preview_link&utm_source=designer&utm_content=czech-platform&preview=06355512c916513c865cad1d2b1dc1a0&mode=preview

2

Hi @Evka_Hamornikova :slight_smile:

It happens because you have a lot of elements of of the grid, just like this one:

image
image1919×865 1.25 MB

My suggestion is avoid to use too much margin left to position elements:

image
image1919×867 752 KB

And use div blocks to split this content, or use columns if you want:

image
image1919×861 370 KB

Another solution after your adjustments is to use a DIV BLOCK as a PAGE WRAPPER with OVERFLOW HIDDEN to put all your content. Then it will not show if some element is out of the grid.

image
image1919×865 353 KB

Good luck with that, you are doing great.

Eve Kayser

3

Thank you so much for your reply!
I considered starting over, because this was me using webflow first time so it’s a bit messy,
because I was positioning a lot of elements rather randomly just to be in the correct place for me. So I will try to make it clearer with divs haha.

Another thing I keep struggling and it might be stupid but. I switched the resolution to 1920 px, which is my desktop size, so I can see the page as I would when published. But when Im using the 1452px with 100% scale, once I publish the website it looks completely different.

1920
19201369×39 2.43 KB

and it is rather difficult (?) to design it with the 100% scale then when the product doesnt end up looking like it :frowning:

4

@Evka_Hamornikova,

What is it that you see? I have a 3440 wide monitor and don’t even come close to viewing larger than 1600 px wide designs unless they are set to full width, but that is all a design preference. What is yours?

Please advise on your design preference and layout for the project you’re working on? I will try to help further.

Best Regards,
~ Brandon

5

Well this is the prototype I am trying to recreate- Login | InVision

I am preferring seeing the full width, I would say, since it allows me to see the website exactly like when I publish it.

1920s
1920s1455×716 209 KB

When I tried to design it with 100% scale - 1452px , I see the elements overlaping, and messy, so Im really not sure how to do it :confused:

1452
14521447×974 269 KB

This is how published website looks like for me-

1920published
1920published1920×1080 353 KB

6

So I fixed the vertical scroll now… but still the version looks a bit messier on the 13’ mac for instance.

https://preview.webflow.com/preview/czech-platform-9dc9a475f7b3442afaf2bb57?utm_medium=preview_link&utm_source=designer&utm_content=czech-platform-9dc9a475f7b3442afaf2bb57&preview=06355512c916513c865cad1d2b1dc1a0&mode=preview

https://czech-platform-9dc9a475f7b3442afaf2bb57.webflow.io/