Webflow designer stuck at top of the page

Design help General
1

Hello

I seem to have a problem with my designer. I don’t know if it is a bug or just a simple edit that does this but, whenever I do some design to an object, the designer page shoots me to the top of my website in designer and get stuck there. I tried to have like 1000px on one of my section but it still won’t let me scroll down? In Preview it works fine. Please help

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

2

Hi Anders!

Can you, please, paste Read-Only link one more time, as it looks like it is missing in your original message?

3

Hello!

Here it is:
https://preview.webflow.com/preview/tisssss?preview=7b72cbb20e97a0090fcde6e2a23fac38

1 Like
4

@AndersKlingsholm We’ve confirmed the issue on your site, and investigating a fix. As a temporary workaround, can you try quickly changing into Preview Mode and back to enable scrolling?

5

Okey, thanks! I have found a way to work around it for now. Let me know
when you guys found it out.

1 Like
7

Hi @AndersKlingsholm

Our team is currently investigating this – thanks for your patience.

You mentioned you found a workaround, is that the same one Vlad recommended?

8

Thanks! Well, my tactic is that I can select a section and then I can
scroll down. However sometimes it just locks me at the top of the page
again…

1 Like
9

Thanks for the extra information @AndersKlingsholm

I’ll reach back out with more info as soon as we have an update for you :bowing_man:

10

Hi @AndersKlingsholm,

clearfix-pre-group1

I think the are two issues: a clearfix one, and using floats to achieve this complicated layout.

1 The Clearfix Issue

Your layout is built this way:

Body (Container)
   |
   |– Navbar (Fixed)
   |
   |– Home (Floated)
   |
   |– Services (Floated)
   |
   |– Image (Floated)
   |
   |– About Us (Floated)
   |
   |– Image (Floated)
   |
   `– Section 6 (Floated)

Navbar is fixed positioned, which means it will behave like an absolute positioned element, but relative to the viewport, not affecting the height of its parent container. So the navbar is only as tall as the viewport, which means there’s nothing to scroll to.

The rest of the sections are all floated, thus not adding to their parent container’s height. So basically the body doesn’t get informed of the height of the elements it contains, and this causes the scrollbar not to appear.

An immediate way to solve this is to add an element after/below Section 6 and set it to clear both; this will make the body stretch down to contain all of its children, but this is not an elegant solution because the structure of the layout is still incorrect. Which brings me to my second point:

2 The Layout Structure

One potential issue I see with the current layout is, that the way it works doesn’t represent how it’s built, and I think it’s because of a misunderstanding of floating elements:

Visually, it looks like there are two vertical sections, one fixed to the left containing the navigation, and one fixed to the right, containing a list of blocks or sections that the user can scroll about.

But in reality, there’s the navigation fixed to the left, and a lot of sections floating to the right, only in order to stay away from the navigation, not because there’s any content that needs to flow around them, which is the spirit of floating elements (think of the small picture in a magazine’s article with a column of text flowing around it, that picture is floated in order to allow the text to flow surrounding it). Moreover, each of the floated sections are specifically sized, even though they all stretch to the same width. More instructions create more places where things can break.

A potentially simpler and more reliable way to define your layout would be the following:

Body (Container)
   |
   |–  Left wrapper (fixed to left, 17% width)
   |       |
   |       `– Navbar
   |
   `– Right wrapper (fixed to right, 83% width, overflow scroll)
           |
           |– Home
           |
           |– Services
           |
           |– Image
           |
           |– About Us
           |
           |– Image
           |
           `– Section 6

Note that, within their respective wrapper, all the sections remain block elements that automatically stretch to the full width of its parent. Also, since I’m not using any floats, the parent container will always be aware of its children’s heights, making the scroll bar to show up.

Here are some links that you can find useful:
Floats and clears - Webflow CSS tutorial
Visual CSS flexbox builder

I hope this helps clarify the issue and let us know how it works!

1 Like
11

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