Working mode and preview mode look completely different! How do I make the preview mode look the same as working mode?

Hey everyone,

this is my 2nd day on Webflow and my live mode looks completely different to my preview mode. I don’t need my site to work well on iPhone or anything just desktop and laptop screens.

This is my working view:

Vs my preview mode:

I’ve tried looking at loads of other posts but none have the solution for my site?

Thank you in advance!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Welcome to the community @Dylan_Jasper!

Can you include your read-only link as well? The one you’ve included is just the staging url to view the live site so we can’t see how it’s built (or what it looks like between the Designer and Preview).

I don’t need my site to work well on iPhone or anything just desktop and laptop screens.

I’d argue that mobile is probably more important for most sites and for simple designs there really shouldn’t be too much extra work—assuming you structure your project correctly. Just a thought, but Webflow really does make it (mostly) painless to make your projects responsive :+1:

My bad! Here’s the read only link
Read only link

My website is only for my college course it’s got to have blog posts for my work and a mockup clothing store and I want them both to be in the same site! I won’t actually be using it for anything else :slight_smile:

Thanks for the updated link and the extra information on the project. Is this for a graphic design course? Still think it would be cool to have the site work on mobile :wink:

The reason you’re seeing two different views between the working and preview modes is due to how you’ve set up your elements and the change in screen size. When you’re designing, the screen size is actually quite a bit smaller to allow the UI on the left/right of the screen—so when you preview the same design your elements have more room to “grow” and fill the space. As an example, here’s what my view of the working and preview mode look like:

Working:

Preview:

In both views I’m showing the large multi-colored titles to the right overlaying the image as I’d imagine I’m using a smaller display than you, however that may not be what you had intended. When you added your image you gave it a set size which—meaning it won’t grow any larger as you’ve told Webflow that’s the size you want it to be—so I’d recommend removing these values all together:

image

Once that’s removed, your image will stretch to it’s full size (3456x5184px), but now you can adjust your max-width on the image element to something like 40% and it will only take up a little less than half the browser width—no matter what size you’re viewing it on:

image

Working:

Preview:

There are definitely other things I’d recommend fixing if this was a project intended for the public (like naming your classes, not using the columns element, etc) but given your situation that should get you something that looks a bit more like what I’m guessing you intended—and it will work across more display sizes :+1:

You’re a legend mate, thank you for your help!

Is there any more ways for my working view to look just like the preview mode? It’s a lot better thanks to removing the set width & height and making it 40%, but it’s still slightly different. And it scares me that the website can look out of place on their screens but perfect on mine!

I’m doing a media course, but for my final project I need to make a clothing brand with a mock-up of an online store, catalogues, promotional material and even things like tags. I’m hoping to have a nice Webflow site with my blog work and the mock-up store on there!

Thanks again for your help, it’s worked well I think! :sweat_smile:

Do you have a reference you’re going off for the site design? That may help me get a better idea of what the end product should look like and how we can minimize the difference between different displays.

That said, you should think of web design as a more fluid medium than typical design as there are tons of factors that can cause sites to look different. Using viewport units (vw and vh) are a good way to ensure that scaling and such remains fairly consistent across a wide range of screen sizes, but that still requires a good foundation underneath.