Streaming live at 10am (PST)

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

Hi,so Im trying to recreate a prototype of this website on webflow- https://projects.invisionapp.com/d/main#/console/17500186/400762824/preview
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

Hi @Evka_Hamornikova :slight_smile:

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

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

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

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.

Good luck with that, you are doing great.

Eve Kayser

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.

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

@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

Well this is the prototype I am trying to recreate- https://projects.invisionapp.com/d/main#/console/17500186/400762824/preview

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

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:

This is how published website looks like for me-

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/