Skip to content

Meta

My website: Layout

This website uses break points defined by the content itself to reorganise content in 4 different layouts.


Responsive layouts

What a struggle but 💪 eventually satisfied. This was essentially a challenge from my friend Nevan Scott: to embrace grid-template-areas and shuffle things around depending on resolution.

Also, I wanted to NOT use centered layout, even for big screens. Let me know if I pulled it out.

See also:

Small hand-held device

  • 1 column, vertical, compact
Screenshot of my website taken at a resolution of 420 pixels
Screenshot: 420px

Medium hand-held > 620px

  • 1 column, vertical, centered
Screenshot of my website taken at a resolution of 800 pixels of width
Screenshot: 800px

Tablets / small desktop > 1060px

Screenshot of my website taken at a resolution of 1200 pixels of width
Screenshot: 1200px

Large desktop > 1420px

  • two/three column depending on the section of the site
Screenshot of my website taken at a resolution of 2000 pixels of width
Screenshot: 2000px

Go back to top of the page