Header

I love multi-column layouts because you can cram so much stuff into them, but the usual issue with translating them to mobile is that they take up a ton of space. I tried to fix this by having the columns collapse into more columns on mobile. I also moved the left column below the content area so you don't have to scroll past links every time you load a new page, but you can change that by messing with the flexbox order.

I mixed grid and flex here, which I'm pretty sure is a cardinal sin somewhere, but grid made controlling the widths within the menus easier than flex. You can even play around with the widths if you want your menus to be more compact on mobile.

If you use a header image, keep in mind that the sides will get chopped off on mobile (the parts that get cut off depend on how you align the image in the CSS).

Subheader

Here is a link. Here is what a form looks like:

  • This
  • is
  • a
  • list
    • List
    • inside
    • of
    • list