Streaming live at 10am (PST)

Why are my content misaligned when I preview my page?

CloudApp

Here, the contents within the grid columns and rows stay intact but everything else becomes anyone’s guess where they will end up once you view in preview mode.

CloudApp

Same here.

I tried to reverse engineer the bottom CTA lines based on the preview mode, not the designer mode. However, I realized this is a futile attempt as I tried it elsewhere and it’s never consistent, so always shooting in the dark.

CloudApp

Notice how the header, body text and footer all need to be aligned along the same vertical axis of the module but they shift out of place upon preview.

CloudApp

With the images, observe an image stretch and shift too.

Hi @refreshed, thanks, the videos helped me to understand better.

The Designer attempts to show the full page within the designer window, so when the designer panel is open, this will compress some of the available white space and not show the full width unless you are using a larger monitor.

One solution idea for our wishlist may be for Webflow to turn the global objects panel into a modal, which opens on a separate layer (and perhaps movable) and allow for the page to scroll the canvas when it is locked horizontally on smaller monitors.

For the moment,I would recommend to position all absolutely positioned elements within parent elements that have a relative position set, that way you can position elements relative to a specific element rather than to the body element it will help.

On the background image, it stretches because it is set to a full cover, and when the viewport size increases beyond the image original width, the image will zoom and appear to crop: https://cl.ly/2i223B0d2x1Q

Hi, which section is this?

Notice how the header, body text and footer all need to be aligned along the same vertical axis of the module but they shift out of place upon preview.

Testimonials Section

With the images, observe an image stretch and shift too.

Background image is getting zoomed due to full cover option in bg styles.

It doesn’t help.

I have tried all positioning styles inclduing flexbox.

On the background image, it stretches because it is set to a full cover, and when the viewport size increases beyond the image original width, the image will zoom and appear to crop:

The image size is the site size, which is my screen size.

So I don’t understand the need for it to stretch…

Hence the reason for the test.

Dave, is it what @garymichael1313 and @samliew suggested above?

Hi @refreshed, I think so, because if you have a larger image, and the image is set to 100% width, the image will resize along it’s aspect ration when the viewport is made smaller and get larger on larger monitors until the full image can be shown 100% width.

The image resizes in the designer because the viewport (in the designer) due to the designer elements taking up some of the space on the page affecting total image render size.

When publishing to the design staging area, you will see full view, provided your monitor is capable of that.

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