hello everyone. I am new to webflow.
so I want to be designing in the designer which shows exact result of final one.
but when I am designing then go to the preview mode, the elements are moved away a lot from each other.
the first image is of the designer and second is when i preview it . see how they are overlapping in the designer but is fine when i preview it. what should i do so that i can work expecting the same result as it will be on the preview.
and when i am doing all the margins and paddings. i am copying the numbers from the one i designed from figma
basically i am re-designing from figma . but the design is very different from figma’s even if i copy all the margins and paddings from figma.
can you give me a solution?
Here is my site Read-Only: //preview./preview/jumbocart?utm_medium=preview_link&utm_source=designer&utm_content=jumbocart&preview=661a0dafb79a98d3db49e3401fabd201&mode=preview
This is what responsive design is all about. The layout of your site is completely dependent on the width of the browser window. Designing for the web is completely different than a static design in Figma. You have to style your elements to be responsive for every viewport. I suggest going through the entire course here Webflow 101 crash course | Webflow University
To familiarize yourself with responsive design and Webflow. Good Luck! Trust me, this is worth the time invested if you are a designer or developer.
Thank you Dfink but now i am familiar with the mistake . actually i had designed with 1440 px width in figma but in webflow it is 1024 . do you know how to increase the width of canvas in webflow from 1024 to 1440??
You cannot increase the width but you can set the max width on divs to whatever size you want. I usually set my container to max width 1200 by applying that single attribute to a div, calling it container and then applying that style to all containers manually. This creates the extra width.
Just to elaborate a bit on @DFink’s point; there’s actually a Webflow tutorial (that I saved down when starting out with Webflow) in which they briefly show how to make a custom container;
