Streaming live at 10am (PST)

Edit Mode view differs from Published view


#1

Hi all!

I have been designing in Webflow for nearly a year now, and for the most part, i'm really enjoying my experience so far. However, there are a few different niggles I have, and this particular one, rears its ugly head every now and again. When in edit mode, I position elements exactly where I would want them to be on the actual live website. However, every now and then, there are some elements that miss behave and change their position in preview mode, forcing me to essentially edit in the dark. I have started a topic about this in the past, and received some great help, and I have come a long way in Webflow since that time, but this problem still exists for me.

Let me give you some examples.

Recently I have been remaking the Nvidia GTX 1070 website in Webflow. Most of the site has been going well so far, but let me share some of the positioning problems I have. The first problem I came across was that I had to position the Mirrors Edge, Dice, and EA logos just slightly out of the section (now affecting elements below) just to get them to sit in the place I wanted them to be (inside the section).

Logos out of section

So they can sit in the section in preview mode

Another example

I was building three columns of content, all the same apart from different text and pictures, but all positioned in the same place. If you look at the second column, you will see that the column header is taking up one more line than the headers in the two other columns, now forcing the content beneath to be lower than the content in columns 1 and 3. All I care for is that the buttons in the three columns are aligned and level with each other, and I managed to achieve this, as you can see in the pic below.

However, when in preview mode, it still seems as though the extra line of text is still forcing the 2nd column button to be lower than the buttons in columns 1 and 3. Why? Because I have already changed the position of the button in edit mode to line back up (or near enough) with the other two buttons.

I don't know why Webflow haven't really got round to redesigning this aspect of their platform yet? Similar companies have this aspect sorted. Where you position elements in edit mode, that's exactly where they'll be in preview mode, but not for Webflow (well at least not for me anyway). Please don't tell me to use one of those other companies, because Webflow still has far more advantages over the competition, and a very strong, helpful and beautiful community. I will be extremely grateful for any help anyone can give me! I've seen other people create beautiful websites on this platform, and I know that I can do it too. :blush:


#2

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: https://help.webflow.com/lesson/responsive-web-design

I am here to help. For the current issues, could you paste the read-only link to the site: http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link.

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


#3

Hi @cyberdave, many thanks for your reply, it is greatly appreciated. You raise some good points which I will look into. I haven't really had the chance to delve into the wonders of Flexbox yet, but i'll give it a go this weekend. :slight_smile: I wouldn't say I am using absolutely positioned items, I am just using general padding and margin to create space between elements. I will try and use the "min and max properties" more from now on.

Here is my site read-only link: https://preview.webflow.com/preview/davids-amazing-site-c6c0bc?preview=f55fe4ad3a673e75fca09e7c2b184f0d

Also, do you know if there will be any type of alignment tool being brought into Webflow in the future? Or at least alignment guides, like a horizontal and vertical grid? that would be awesome! :smile:

Many thanks for any help that you can give me. Hope you and the Webflow team are having a great day "making the web beautiful!"


#4

@cyberdave HI! I just wondered if you could help me figure out what I am doing wrong here?

Here, I have three columns in the footer section. In the 3rd column, I have the Logos in the positions where I want them.

However, in preview mode, the Nvidia logo moves to the left of the four social logos that are wrapped in a div. Do you happen to know why this is?

Also, as soon as I type in the text block, it moves to the side of the Nvidia logo.

I am not sure why this is happening, do you have any ideas? I looked at the responsive tutorial, and took your ideas into account, but I can't see what I am doing wrong? Any help you can give is greatly appreciated. How would you go about making the footer of this site? Here is the site address: http://www.geforce.co.uk/hardware/10series/geforce-gtx-1070

Here is the part of the site I am trying to recreate.

Again, many thanks for any help you can give me.

My site: https://preview.webflow.com/preview/davids-amazing-site-c6c0bc?preview=f55fe4ad3a673e75fca09e7c2b184f0d


#5

Hi @Neotokyo, thanks! I took a peek and I think the issue is in the float right that is on the social div logo div.

This is easily rectified using flex stying, see an example:

I hope this helps!


#6

Wow! Thanks @cyberdave! That was amazing! And to go as far as to make a video as well! What a great community we have here at Webflow. This video helped so much. I really need to knuckle down with this flexbox stuff. Many thanks for the very informative video. Hope you and the team have a great day!


#7

Play the flexbox game :wink: http://www.flexboxgame.com


#8

Thanks, i'm gonna get on that now. :slight_smile:


#9

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