Edit Mode view differs from Published view

Hi @Neotokyo, thanks for the comments. One thing that should still be taken into consideration on any html design is whitespace.

The designer takes up part of the whitespace in the browser on desktop view in edit mode, so it is vital to plan the styling to be responsive in reacting to that whitespace when the site is published, and when the site is being resized. (browser window resizing).

Using absolutely positioned elements is fine, just keep in mind the white space. The min and max properties will help to control how much an element will expand or not expand due to the white space.

Another option to consider is Flexbox, which takes a lot of the hard work out of the equation: http://flexbox.webflow.com

I can understand it is different than some other companies which have absolutely positioned elements placed on the page in a “drop and forget” mode, but then again, those web builders are often not very responsive in the designs they create.

I know it is somewhat of a leap to go from using more of a visual wysiwig editor to one based on html and css rules, but hang in there, after a while, you learn to see those kinds of css issues quickly, which might impact to the layout.

In terms of the designer view not reflecting the published view, I would have to comment that while the visual look might be different than what was expected (in some cases), the published site is still following all the css styles that have been setup on the site. Webflow is not changing styles on the published view and the published view should be shown exactly as styled using the CSS styles panel.

Here is a good video: Webflow 101 crash course | Webflow University

I am here to help. For the current issues, could you paste the read-only link to the site: Share a read-only link | Webflow University.

If you would prefer not to share the link, please feel free to send me a private message with that link.