I started using Webflow about a week ago and love it, but I’m pretty much stuck.
I’ve been having a lot of trouble with flex and responsive design.
The webflow tutorials about it were less than helpful, and I couldn’t find anything more specific elsewhere. It seemed simple enough yet here I am.
I found out about EM and REM for text and have applied where it’s needed, yet the text doesn’t scale with the page.
I’ve also experimented with all the flex settings, yet can’t find a combination that does what it’s supposed to do.
I’m essentially having trouble making stuff not break when the window shrinks. Text is either too big or images and elements overlap or go off screen despite alignments.
Does anyone know any more in-depth tutorials around this, or can tell me what I’m doing wrong?
Fair warning: It’s pretty messy right now as I switch and delete things, trying to get flex to work
Use “less” styles. For example her for very simple layout (2 simple buttons in one row) - you add endless styles/nested grid/vw-vh and any trick out their:
div wrapper with text align:center: and inside two buttons display:inline-block; and that’s it
Do not use so big horizontal margin/padding on mobile (The element if out of the screen - very buggy):
Do not use negative margin (Only in special cases - not anytime you want to move the element up or right) - use padding for extra space around box
Stop using 100vw for any block element (By default div is 100% width - use vh/vw only if you want to “fill up” the screen) + also in general dont give height: 3vh for elements
You nest endless grids one inside another (Hard to debug) - use nested grid only if you really need to
No need for margin-left/right: auto; anytime you want to align text (Use text align)
Summary: Your problem is you use flexbox for all divs even for simple html1 layouts.
