#032: Making The Grid Responsive

We start out with playing with our blog post module, fiddling around with spacing. We also add the little colored square in the upper left of the module, a visual signifier of the type of content that it is.

The next change we make is to lessen some of the outside gaps at narrower screen sizes. On wide screens, the content is 80% wide (10% width edges) but it feels better to go more like 90% on smaller screens (5% width edges).

We add in a little transition for when that media query hits, which can be a really fun designer-y trick. I like it in this video, but eventually this got pulled from the design. It can get choppy when there is a lot more content on the page and rather distracting.

We alter our grid system to have a breakpoint at the smallest size. It’s super easy, we just stop floating the columns and make them width: 100%; Yay for not overthinking grids! We battle some specificity problems on the way.

We open up the real iOS simulator to check out the grid working on a “real” mobile device. We struggle a bit finding the proper meta tag, but ultimately go snag the correct one off CSS-Tricks.com. It works! But of course we have some positioning issues we’ll need to work out. For the record, that meta tag is:

<meta name="viewport" content="width=device-width">

We tinker tinker tinker with spacing and sizing until things look OK. Things are looking pretty nicely responsive by the end!