O'Reilly logo

Mastering PostCSS for Web Design by Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding responsive capabilities

Although Bourbon does add a degree of responsivity to our code, it's not quite enough for our needs. If we try resizing our demo, it soon becomes apparent that the elements don't quite go where we would want them, to say the least!

The quickest way to see just how the design looks when resized for smaller devices is to use Google Chrome. Press Shift + Ctrl + I to enable Chrome's developer tools:

Adding responsive capabilities

The design works well when viewed at 1280px x 1024px, but this soon changes if we change the available viewing estate to suit an Apple iPhone 6 at 375px by 627px:

See what I mean? It just doesn't look right, does it? Fortunately, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required