Guide for making content responsive about minimal-mistakes

[mmistakes]

The theme is responsive and does partially do what you want. If you look at this test page with some images I have classes for doing 2 images side by side or 3 side by side. For mobile and smaller screens they squish down into a single tube of content.

I am using a variation of the Semantic grid system (converted from Less to Sass), but it isn't anything like Boostrap or Foundation where you apply classes directly in the HTML. Instead I'm using Sass mixins to define an element's width in columns, prefix or append space around them, or push/pull them across the grid in the stylesheet to keep the markup cleaner and semantic. I'm not a big fan of gunking it up with stuff like <div class="span-4"></div> if I don't have to.

If you take a look in grid.scss you can read through the mixins that are partially documented. And if you look in page.scss you'll see how I use them as Sass includes along with some media query mixins to adjust for various screen sizes.

Hope this helps.

[tdewell]

Thanks for your reply and explanation of how responsiveness is done with this theme. I will certainly look at the test page with some images to get an idea of how to make the content responsive.