Designer & Preview Mode - Why Different

Firstly, this looks like it’s going to be a great product so keep up the good work.

So caveat - I’m not a web developer, just a simple programmer, so I have a simple question.

Why when I hit Preview is the view often very different to the Designer mode. Even though preview is super quick, this does seem to defeat the idea of the WYSIWYG editing doesn’t it - or have I just made up the “WYSIWYG” bit?? I just have a label under an image, and the label positioning can vary quite greatly from Designer when I hit Preview. ???

Thanks

Welcome to the forum Scott! Thanks!

The preview is supposed to look exactly the same as the designer but with the ui elements removed - the idea behind a WYSIWYG. Can you tell me what your sub-domain is so I can see what you’re trying to do and why the label is moving down?

I’m afraid I’ve completely destroyed the work I was doing in an effort to understand why I was not seeing the same in the two modes. It was a very simple site but a bit frustrating. When I get to another point where I’m seeing non corresponding views I’ll stop work and give you a heads up.

As a beginner you assume ignorance but I’m relieved that the product should work as I thought. :smile:

Scott

You could also do the following not to stop your work and still manage to show your work:

  1. When you encounter an error, make a screenshot of both and save it.
    Also go to your dashboard and settings of site you are creating and
    hit the Duplicate button on top. You can continue to build your
    original website and can show the copied one to admins.
  2. As far as I can remember, you can get to the point of website design
    you were at some time. There is a version panel in dashboard
    settings of site.

Hope I’m right about that…
~Bartek

1 Like

Thanks Bartek, will check that out.

Scott

I am having this problem when i switch between design and preview mode. Things move around on the page.

here is my sub-domain
wwwbutlerrefrigerationconz

Thanks for your help.

ok I’ve just watched responsive layout tutorial. Seems I need containers and columns. I guess this is why it is changing. :slight_smile:

butlerrefrigerationconz seems to be looking fine! Yeah you may have run into problems because you weren’t using responsive structure. That may do it.

I’m just having a little issue when I switch from default view to tablet view, my main picture is not showing. I’ll look into this more via the forum and tutorials.

Is it a background image that isn’t showing up?

yes. The first image. Also one of the snippet images isn’t showing either.

That’s a bug we’re working on. Background images aren’t cascading like they should be. Try click on “Image & Gradient” and clear that property in all the media queries:

|300xauto

Hows does that work?

Yes! Brilliant thank you!

I moved a post to a new topic: Image upload is stuck on “processing”

OK, returned after a short hiatus.

I’m finding there is still an issue with the preview and design modes differing. It’s actually fine for default and ipad, but diverging when I switch to preview in iPhone portrait and landscape.

No doubt I am butchering your tool, but if you say that the views should be the same then perhaps there is still an issue here?

If you guys want to look at the landing page its:
https://webflow.com/design/lostinthemachine8270934

It’s a logo, button and label.

Cheers
Scott

Ok I see what’s going on. You are using columns to layout your site and there are some empty columns. What happens when you publish your site or you preview it all the empty columns disappear. So it seems you are using margin and padding to offset those empty columns and then they disappear - so all the margin and padding you used overcompensates and the elements overlap themselves.

In your case I would delete all the Position: Relative and Position: Absolute properties you have on your elements. Also remove the Top margin you set on your button in the phone devices.

If I were you I’d recreate your site - instead of using columns do this:

  • Select the Body
  • Make it background black and make it text-align center.
  • Now when you drop anything (images, link block, button, text, whatever) it will be center aligned.
  • If you want your images or text to be a specific width give it a width.

In this case you don’t need any containers, columns or all those extra styles.

Thanks for your response Sergei. I assumed there would be a much better solution. :smile:

I may not be an untypical profile though (as your user base grows) - a software developer with close to zero web dev experience. I’ve watched all the tutorials (once) and the idea that empty elements will just disappear isn’t very intuitive IMO.

At the risk of sounding idiotic, why do you delete the empty columns? Other than optimisation, is there a technical reason? Doing so breaks the WYSIWIG and results in having to deal with the likes of me.

Cheers
Scott

Thanks for your feedback @mashton! We don’t really delete empty containers. We just give them a height in the designer when div/containers/columns are empty so they’re easier to work with. But when you publish you don’t need them to have that extra height.

It is a little tricky I agree because as you go down to the smaller devices like the phone the columns collapse and stack on top of each other. We’ll have to figure out an intuitive way to deal with this issue.

I moved a post to a new topic: Centered in designer but not in preview