Hello,
I’m not normally a Webflow person but needed to design something on an existing site ASAP and they used Webflow so forgive my stupid question.
All 3 versions of my website looks different, and that’s across a monitor and 2 laptops to see if the published version was different.
In the editor it is exactly how I want for desktop (haven’t gotten to smaller aspects) but when I preview everything seems to move up, and when I publish it does the same. I have tried just adding sections to make the preview version look good but the proper site still is crumpled up.
All the resources I found have said to make sure you are using sections then containers then layout which I have. I have also made sure that editor and preview are the same dimensions.
Actually I never use sections for containers anymore, it’s often easier to control DIV layouts. But your your purposes they’re fine here.
The main thing is your layout is based on print-design concepts and cannot respond at all when the viewport shrinks for smaller devices. Here’s a walkthrough of what you’ll need to change;
Michael thank you so much for such a great answer, I really appreciate it. And yes, I was getting desperate so I started using sections as spacers to see if it will help (and many other “creative” fixes that didn’t work). Maybe the background for now is a no go and a new design is needed. Straight lines aren’t in our brand kit so I’ll have to look into the masking solutions you mentioned.
Thoughts about just slicing up the background and inserting each image into its corresponding section? Or would that start to mess up quickly?
It’s not elegant but it should work well here because your colors are all solids. You might notice slight pixellation as the image is resized but I wouldn’t expect much at all. Good idea
Since it’s a 1 pager I’m not too concerned with speed so I can put in something high res. Fingers crossed for me, I just did solid colours and it’s just not… quite there
