Best practice for Section Height / Width

Community resources General
1

Hi all,

I’ve been using Webflow for a year now, have completed the University videos and genuinely feel pretty confident with the system. I am relatively new to the world of building websites so wanted to get some opinions and thoughts on best practice when it comes to how everyone approaches basic layouts of websites - specifically around section heights / width on desktop. This is obviously a very open question so just some thoughts and opinions would be nice.

  • For example - If we took a standard section, mid-page of a generic website, would you look to set the height and width based on vh/vw, px or % are there general rules you work to?

  • Would you use a combination - for example vh 100 but with a min px height of 800?

  • Are there any major things you’d avoid doing as it creates errors?

  • Do you set your designer to smallest viewport settings and build from there?

  • Do you just trust the auto settings and manage it with padding?

I appreciate every website is unique in its own way and that design language can heavily influence how you approach each build but I just wanted to get some individual thoughts on it.

2

hi @ProposalMoJo you have answered these questions your self with

It’s nice that you have completed WFU but these tutorials are only for how to use this platform. I will recommend to take some CSS courses to understand better these principles and be able answer your questions on your own.

Anyway, some notes to your questions.

  1. there are not general rules and choice units depends on situation. Anyway the general rule is to not touch height as height of element is driven by its content except when position is absolute.
  2. answer is in point 1
  3. Avoiding errors as much as is possible is by understand what you doing
  4. In standard coding development yes as it more natural (for me) but not in WF as workflow is set opposite way designing from large to small.
  5. do not understand what you mean with auto setting. if you mean value auto for padding and/or margin yes I do trust as it is defined by W3C and I use these to center elements if I need.

Hope that give you some answers to your questions but again finishing WFU has nothing to do with knowing CSS.

1 Like
3

Thanks for the feedback, it’s pretty invaluable as there’s a lot of things out there that say how but not why.

Yeah CSS courses sound like a good idea, I know the basics just need to get more experienced with it. I will look into it!

4

hi @ProposalMoJo the thing is that WF presents it self as “no-code” solution (as other similar platforms) but for marketing reasons they don’t mention loudly that knowledge how to develop websites is necessary. This mean that WF is no-code tool for web developers. :wink:

It is the same principle as if you want to fly a Boing, you have to be first a pilot who nows how to fly and after take a training how to fly specific model. And not sit into Boing cockpit and start reading manual how to actually fly. :wink: