Design question about toggle preview and accuracy to design

Hey guys and gals - I’m still sorting this program out and have a question. I notice, recently in the animation section, but also other areas that when I visually design a layout, the design differs from the toggle preview. What I can summarize is that it is because of the panels on the right side taking up space. That shrinks (relatively) the page as I am designing. Then when I go to toggle preview the panel goes away, my page expands getting bigger, and things don’t move as far (relatively).

For example, on my reveal test page I have. In the design phase the element moves behind the lower iceberg, but in live preview (on my monitor at least) it doesn’t move as far down (moving the H1 heading text).

Am I missing something? Is there a way to predict or test this in real time? What I found myself doing was overcompensating in the design mode and then toggle previewing it to see if I compensated enough (and that can’t be the best practice).

I’ll attach the link - it’s for the reveal test page.

https://preview.webflow.com/preview/louiss-dynamite-project-1c9918?utm_source=louiss-dynamite-project-1c9918&preview=db68f610d8b7782679ebbc9543347a8c


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

This is known as responsiveness and is what Webflow was built for. There is no way to control a users window size, so we use webflow to design fully responsive layouts that react well no matter what design you make. You need to modify the design for different widths as you go. Using percentages helps a lot with this.

This may help you get started Intro to responsive design | Webflow University

1 Like