Sass Breakpoints + Responsive Images + Panels = RWD Utopia — Video Available

This session assumes that you've already gotten your feet wet in the world of responsive web design, and you have a decent understanding of Sass + breakpoints.

Everyone knows that responsive design involves some kind of solution to scale your images down for mobile users, a.k.a. Adaptive Images, Borealis, etc. So far, so good.

Unless you're using full-width huge images everywhere on your site, then at some point you have to face up to the image float problem. If you set a max-width on your images, then somewhere along the way your images start to look itty-bitty.

Ideally, you'd want your images to be as large as possible with enough room to neatly fit a few words alongside the image without weird text wrap rivers. And without any awkward white space between the image and the text. That's a lot to ask of basic percentages.

This session will show you how simple max-width percentages on your images don't fully solve this common problem, nor do breakpoints alone. But we can achieve a happy solution through the power of Sass. 

Bonus: If you use panels, there's some fantastic panels integration solutions that can make our lives even better. Let's explore some outside-the-box Sass solutions and dive into custom panels hotness! 

The video for this session is available on There may be sound dropouts in the video — it's not your computer.

Saturday, Oct 26th
11:00am - 11:45pm


Skill Level