Elements change position in preview mode

Hi all! Happy New Year!

I have a problem whats been souring my otherwise great experience with Webflow.When in preview mode, my elements change position. When I’m editing, I position my elements exactly how I want them to look in preview mode, but they move from their original location. Why does this happen? How can anyone edit like this? I know there must be something I’m doing wrong here, but what? I don’t know. Any help would be greatly appreciated.

Take these examples:

Edit mode: Here, you can see that the “Turn up the jams” text is sitting just on top of the mans head.

Preview mode: However, in preview mode, the text has moved and is sitting on top of the mans face. Why has it moved position? I don’t want the text to be there.

Another example:

Edit Mode: Here, I have positioned the play button to be in the middle {or somewhat in the middle}.

Preview mode: But here, you can see that the button is not centered anymore in preview mode.

If anyone knows how to solve this problem, i would be most grateful for your help! I have tried several different projects now, and each one does the same thing.

Many thanks for any replies!

Hope you all had a great new year! :blush:

Hello @Neotokyo

When you are working in Designer (edit) mode you have a right panel, which takes part of the screen width. So if you put element width=100% it will take 100% of “working area” which is equal browser width - panel width. Then when you going to preview mode "working area become wider because there is no right panel.

On this example I assume that background image has position “stuck to the bottom” and width 100%. So when you go to preview mode image get scale a bit, that is why it looks like text change its position.
Here I could suggest to use image size in pixels

In this example you probably has “thumbnail box” width in % from screen (body) width. So again, when you go to preview mode and “working area” become wider this thumbnail become bigger.
Here, if you want some element be exactly in the middle (vertically) of other object (div, section, container), make external object position: relative and internal object position: absolute, aligning top: 50%, transform: move on Y =-50%

Hope it helps.

Regards,
Anna

Hi, Anna! Many thanks for your reply! Your help did work, and that’s great. However, I feel that its a little to much to do each time I want to position something, which is pretty much everything. Please don’t think i’m getting at you, because your help was great and you are the only person to reply so far. This is Webflows problem and a major one. I have used Webydo, Edge Reflow, Macaw, and plenty of other wizywig page builders, and all of these programs compensate for the extra space taken up by the edit tools. So basically, when positioning something in edit mode on all of these other programs, everything looks the same in preview mode. I don’t understand how this problem hasn’t been addressed already. People may tell me to use another program, but i like Webflow the most for many other reasons.

Again, thanks for your help, and i wasn’t ranting at you, i was ranting at Webflow. :smile:

Best regards

Neo

I understand your frustration, David, but here my opinion.

Webflow is a tool for design websites without thinking about code. But in the same time this tool built on pretty straight basic rules of HTML and CSS. No tricks for compensate something, browser doing exactly what you telling it do. Precisely because of this fact as a result we obtain a clean, professional and beautiful code structure on back end.

I have been trying Webydo, Wix and Weebly… can tell you it is quiet different.
I agree that Webflow still has things to improve, but for me personally, by professionalism these tools are having lower level than Webflow.

Cheers,
Anna

Yes, I agree with you completely Anna. In my experience, I find Webflow to be the best of this type of web design tool out there. I hope that they can get this problem sorted in the future. Just one more question: Do you position everything the way you told me how to position my elements, or do you do things another way? I am willing to start another project, and I would be grateful for any help and guidance you could give me.

Again, many thanks for your help. :blush:

Always welcome :smile:

From my experience, If my goal is centering content vertically sure I am using same technic. If I have few lines of text for example (header, sub header and paragraph) I just wrap all this text with div and centering that div.

To put text on certain position is much harder and not always make sense because you can’t predict what kind of screen user will have or even browser window size. So I do not try to keep this kind of positioning hardly dependent on image content. But in general - yes. For example, for catch users attention it is nice to have text do not cover most noticeable content on the image.

Many thanks for your reply! I will try wrapping elements in div’s more often.

:slight_smile: Only if you need to group them :wink:

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