I am having a few issues with my site and I can’t figure out what I am doing wrong or why its happening.
Everything is a lot bigger on my live published site then it is in the editor.
In the editor everything seems to be aligned but when its in the published site, everything ( my header, text boxes are all off aligned.
How do I get the same nav bar setting( spacing, sizing, etc ) to spread across all my pages. When ever I make a change on my home page, it affects all the other pages and throws all my content off. Some things done even appear and I need to play around with the padding and spacing again.
I’ve watched the video a million and one times and I can’t seem to figure out what I am missing.
Thought you might like to make it a million and 2! videos!!
Wow, so there’s a lot going with the project settings. It looks like you are trying to make changes to a Site Template to fit your specific needs. This can always present unexpected results because we don’t always know the intimate structure of all the elements within the Template.
Having said that, it doesn’t mean that changes cannot be made successfully.
To answer your questions:
Within the editor, the viewport is reduced slightly to accommodate the Style Panel on the right side of the browser window. Therefore when looking at the preview or published site, the viewport becomes larger and thus the canvas for your project also becomes larger (albeit only by a small margin)
This could be related to 1 (larger viewport because not Style panel), also I noticed that there was a lot of specific padding and margins used to align things. This can lead to unexpected results when using the designer in a larger screen and then viewing the published site on a smaller screen and the other way around (But still desktop). This is where the power of flexbox can help to Align and justify elements (Although, flexbox can be another massive learning curve - more videos anyone?)
Using symbols (like your Modal Screen, Side Contact Form, Footer) to create re-usable elements/components is a very good way of keeping consistency across different pages. Also speeds up workflow not having to make multiple changes to multiple elements.
Apologies for the long reply and no specific ‘fix’ for what is happening with your site. I hope that it does shed some light on why things may be happening and possible how to approach the design from a different perspective.
I feel you pain, frustrating when we don’t know what we don’t know!
Regards,
Keiran
So I basically have to size down everything to keep in mind that everything will be a bit a larger when I publish it.
I used a template to get me started- Im not a designer so I figured it would be fairly straight forward… I figured wrong.
I did make some changes… delete unwanted text box, images, and basically anything that I didn’t see useful to my website, but I guess this messed everything up. What is your recommendation, whats the best method to make everything centred? Basically - my nav bar, and the content… hell I should just pay someone at this point to do it for me but then Im screwed for anything down the road when I want to upload new content.
I made a couple of other changed just recently - not sure which version you saw. But now my footer is all wonky - if possible could you suggest a fix on that?
Ah, not necessarily size down, just being conscious of how different elements relate to each other on the canvas.
A common way to deal with different screen sizes is the use of containers to keep your content within a defined size. Webflow has a pre-configured Container component that is 940px wide, this allows the design with responsiveness in mind.
Templates are good and have their place. As mentioned, unexpected results come when we don’t understand how the Template has been structured or created (use of padding/margins, rows/columns or flexbox) all have their place, but still need to have an understanding of how it all hangs together.
Recommendation - Always depends on what your desired outcome is. If you want to learn more about how to use Webflow with this project, then persevere. If you need a website for your business, then the motivation is entirely different. Your time costs money. And if trying to figure out how to create a site (or modify a Template) takes you away from your core business, then probably not the best use of your time or resources. (Let alone the increased stress/anxiety of feeling like your banging your head against the wall!)
There are Webflow experts (https://experts.webflow.com) that can help create your site for you, I don’t know what the costs would be but you could approach to find out. If you have a clear understanding of what you want your site to do, then it can be structured in such a way that will allow you to add content in the future. (Perhaps by then you may have a better hold on how to use Webflow?)
Others have put out a general call on these forums, saying that they are looking for a developer and got responses that way.
I’ll have a look at your Footer to see what’s happening and post back to you.
I’m adding this note here in case someone stumbles over this page because of the same problem i had.
My published site was also always about 25% bigger than the preview in webflow, even sizes with fixed pixel units. On all browsers too.
Then i remembered my display settings on Windows were set to 125% =)
(This operation system setting works on all browsers, but not on webflow designer or preview, which it shouldn’t of course)
here is the link to my project. http://peters-first-project-6b11e0.webflow.io/
