Streaming live at 10am (PST)

Why are my content misaligned when I preview my page?


#5

Yep, I had to go to a monitor that is larger too. I know it’s seems challenging, but what application uses 2560 for it’s admin or design panel? Applications won’t do that, you’ll need to buy or use a larger monitor, this applies to all apps online, not just Webflow. :blush:


#6

Simple. You need a width larger than your site’s width so that Webflow designer has space to display the left and right sidebars.

There shouldn’t be any limitation to screen size.


#7

@samliew, so what I’m deducing from your argument is that Webflow does not cater for clients that have a 2560 x 1440 pixel size (or in that range)?

@webflow where does that leave me?


#8

No, I did not say that. I merely stated you will need a larger monitor resolution than your target design, so that Webflow can display the designer UI sidebars alongside your working “canvas”.

Perhaps get a larger monitor (4K) if neecssary?


#9

@samliew it is in your best interest as a Webflow employee to admit the limitations of Webflow. It suffices to say that Webflow as an app is not built to work on the 2560 x 1440 pixels platform. This is a better position from both a business and brand perspective.

I am not adapting my resources to compensate for your flaw. As a customer, I should be able to use Webflow as is, and this is not the case. And as far as I know, nowhere does Webflow cite a disclaimer on screen size limitations to potential or current customers. For this reason, Webflow has no benefit to me.

Thank you for your time.


#10

@refreshed

Disclaimer: I am not a staff of Webflow, and the opinions expressed above are my own and do not necessarily represent the views of the Webflow team. I disclaim all and any responsibility or liability in respect of information detailed or omitted (or the consequences thereof) from this post.

I admit Webflow has limitations. I have even created a list of them here:

[List] Feature Availability & Limits

Unfortunately I can’t do anything else about it even if you wanted to pay me.


#11

Hi @samliew. sorry. I honestly thought that you are answering in the capacity of @webflow staff. I appreciate your efforts and support.


#12

Hi @refreshed, thanks for reaching out. I took a look a the site and I can see numerous elements with unusual styling, and with many different elements on the page.

I have to admit, I am not entirely clear what kind of layout you are trying to create, or what exactly the issue is with the large image, there is only a couple of types of behavior for images.

To help get your questions answered, would it be possible for you to present a simple example, of the grid you are trying to create, do one of the layouts on this page match or are similar? https://flexbox.webflow.com or https://flexbox.webflow.com/#fluidgrid?

You will need to use flexbox I think for the layout you wish to achieve, the Rows and Columns and Container are all based on 960px grid layout, so are not a good choice for a wide screen layout.

Using Webflow you can add styles which will predictably cascade from Desktop to Mobile Portrait. If you take an image, upload that to an image widget and then style the image to be 100% width, the image will always be 100% width of the parent element, i.e. the Body or whatever parent element it is.

The image will resize according to it’s own aspect ratio.

Background images are different, they can be set to Cover (cover the whole area of the element where the style is used) or Contain (always show the full image, and resize the image according to it’s aspect ration, even if it does not cover the element where the style is being assigned).

When a Background image is set to Cover, it will be cropped when the element that the bg image is styled on is smaller than the original size and will Zoom when the element where the bg image is being used is larger than the original image, causing the image to stretch (possibly causing distortion).

If you can perhaps create a site project with a grid using the flexbox examples, then let us know at what point the issue occurs, and exactly which page and element class, it will be easier to help provide a design solution.

Thanks in advance.


#13

Hi Dave,

Thanks for getting back to me.

Much of what you suggest I’ve already tried.

I guess the major point of solving this problem—if there is indeed a solution for it—is to actually test it on a 2560 (or similar) screen size on your side. As far as the grid is concerned, in the project I shared, you will see x3 grids constructed in different ways (including just an image). It’s a modular grid. You can display it at your peril and see for yourself why all the elements may look confusing to you. Just leave the v3 grid on flex display and view it with the other screens also with flex display (one by one).

The major issue is that within the full-screen scope, the elements and the grid are incongruent between Designer view and Preview.


#14

Get a 2560 pixels wide display and place various elements at different alignment intervals over the entire screen. Then see what happens when you preview it.

This is the only way we can effectively troubleshoot the problem if there is indeed a soltuion to it.


#15

I’ve tested a quick design—which is also there to check out—within the 980 pixels Webflow framework. Then I’ve used both relative and absolute positioning to shift outside the grid/column framework just to check if I ain’t crazy. Lo’ and behold, it does the exact jumping around when I preview it!


#16

Hi @refreshed, thanks, can you share the page where you have the latest referenced 980px grid layout? Are you using a container element(940px wide, 960px including margins)?

Let me now, I will take a look.


#17

Dave,

It’s in the same read-only file.

I quote from my email for reference:

I have even tested elements within the Webflow grid framework to see if it will work. I called it
"tests using webflow grid" but the elements outside the grid framework do the same thing.


#18

Hi, can you be a little more specific, what do you mean by: “Then I’ve used both relative and absolute positioning to shift outside the grid/column framework just to check if I ain’t crazy.”?

Can you please take screencast of what is happening? here is a good tool: https://getcloudapp.com

I see one element with the class “tests using webflow grid”, but I am not clear what your styling objective is, here are the elements I see being used:

And the “tests using webflow grid” class:

Next, maybe if we can take each element by element, you have a container and then an image with class name “Image 2”.

What is the reason for changing the default responsive styling on the image and setting all the offset postioning, what are you trying to accomplish with this image?

For one thing, you have the Image 2 class set to an absolute position, nested under parent element having Auto position. Since there is no parent element having relative position, the absolutely postioned element is positioned relative to the body element, not the immediate parent class.

Thanks in advance.


#19

Hi Dave,

I’m testing how the elements will behave if I place them anywhere in my view, especially cross-aligned with other elements. The reason I did this was to test that, if I do things within the Webflow grid framework and offset elements, will it work?

What I find is that it doesn’t.


#20

Hi, well I am still not sure sure what you are trying to do, the elements stay exactly where they are positioned, depending on the design.

Can you tell me, what you are trying to accomplish with the absolutely positioned image element?

Webflow is a responsive web design tool, so it employs best-practice css styling techniques, but every design is different.

I am still not sure I understand what this means:

I’m testing how the elements will behave if I place them anywhere in my view, especially cross-aligned with other elements.

Could you take a screencast showing what your steps are? https://getcloudapp.com

It will help to know,

  1. How it should look before preview, and
  2. how it looks while previewing the site (i.e. understanding how the layout is breaking), will really help to isolate which styling should be looked at.

#21
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.


#22
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.


#23
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.


#24
CloudApp

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