Why are my content misaligned when I preview my page?

Community resources Product feedback
1

Hi,

I am designing on a 2560 x 1440 pixels screen size on my 2560 x 1440 pixels desktop monitor.

I have been experimenting with columns, custom div box placements and flexbox to my best understanding. Yet, after weeks of trial and error, I get nowhere. I am using a modular grid that makes full use of my format (the page) so all my design elements are informed by my grid and corresponding baselines. I wrote a post asking for help on this here:

The first problem I’ve noticed was that my images—exported from my design to fit within the 2560 x 1440 framework—are extending the boundaries of the Webflow Designer if left on the full size. I tried playing with percentages as suggested here:

After all, I had to downsize my images. However—although it then fits within the Designer’s version of the design—this creates the problem of being below (due) size upon previewing my designs.

A related problem is that all my elements of the page “stretch” upon preview. I sort of understand that it is due to the screen size but it still creates a design problem for me because I’m literally designing in the dark to speak. Moreover, many design elements jump and misalign each time I preview. I have tried a conglomerate of ways to troubleshoot this including designing with flexbox, columns and various kinds of div placements within the main container (the key grid area) of the content. I’ve also used floats and clears. To no avail. I have deleted and started my project over a couple of times too. redone sections with a different workflow and tact.

Nothing. It behaves the same.

In some cases, I had to misalign my content in the Designer View so it aligns in the Preview. mode. But this is out of control.

On the smaller screens, things become a complete mess as they implode within themselves.

It should be noted that “columns and rows (?)” in webflow snaps to the webflow grid and it is literally of no use beyond the Webflow framework.

So what would I like to achieve?

What everyone else achieves with their Webflow designs lol! I want to design with the 2560 x 1440 framework without my content jumping around or misalign when I preview. And all my sizes of my content be the full size as I have replacement images for smaller screens. In the absence of Webflow’s media queries for larger screen sizes, for the content to at least fold or correspond nicely within themselves and each other. I know that I have to realign them on every screen and that’s fine.

I really look forward to any assistance on this matter as I have ploughed long within the Webflow Designer—and although I have learned a lot as a web newbie—things are taking its toll and I am beyond the level of frustration.

Here is my project if you wish to see what I mean and recommend alternatives:

https://preview.webflow.com/preview/halaalbrands?preview=f1df7a89afe4a80fd070473e5bff62b6

At this point, I am considering redesigning my entire website from scratch to fit in the limited Webflow framework. It’s a lot of work, but at least I know Webflow Designer will respect its own limited dimensions and architecture of design?

Thank in advance!

2

@thesergie
@PixelGeek
@samliew
@webflow
@vincent

3

This is not advisable. You’ll need a 4K monitor (3840px width) to design properly for 2560px website layouts.

4

Hi @samliew,

What does this mean?

What is the evidence apart from my experience from a technological viewpoint that supports your advise so we can all learn and better understand?

…and what are the corresponding implications? i.e what are my limitations with regards to screen size on the Webflow platform?

Thanks

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.

1 Like
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 Visual CSS flexbox builder | Webflow?

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:

54%20PM
54%20PM496×550 17.9 KB

And the “tests using webflow grid” class:

54%20PM
54%20PM490×1310 45.1 KB

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?

29%20PM
29%20PM482×1652 60.5 KB

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.