Streaming live at 10am (PST)

Resources and help with responsive design


#1

Hey y’all

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

Here is my site Read-Only: https://preview.webflow.com/preview/sams-first-project-2c93ee?preview=17e7c64c006bd8bd4940a29782b012bf

http://sams-first-project-2c93ee.webflow.io


#2

Flexbox

Any tutorial on google/youtube/codepen-examples is great to learn flexbox


12 examples: Not only watch but also try (Create demo project).

university

In general, flexbox is a more advanced topic - so you could start her:

Also her you find great workshops:

Great course (Same layout as your hero layout)

Tips

  1. 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

  2. Do not use so big horizontal margin/padding on mobile (The element if out of the screen - very buggy):
    image

  3. 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

  4. Use webflow flexbox columns for simple layouts

  5. 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

  6. You nest endless grids one inside another (Hard to debug) - use nested grid only if you really need to
    image

  7. No need formargin-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.