Adapt.js is a fantastic responsive implementation of the 960 grid system. A responsive design is one that recognizes that the web is a diverse place and dynamically adjusts its form and/or function to meet the demands of the screen size (and device capabilities) where it is being used. The initial treatise on responsive web design proposed using media queries to accomplish this, while Adapt.js uses javascript. Both methods have their advantages/disadvantages, though I most often find the javascript route (perhaps combined with a feature detection library like Modernizr) to be the best match for a given project. It should be noted that Adapt.js alone does not constitute full-fledged responsive web design. Neither do media queries alone. True responsive design is a methodology, not a technology, but that is a discussion for another day.

All that being said, if you use nested grids and the basic mobile.css file provided with Adapt.js you may end up with doubled margins when viewing your design on a mobile device. At other sizes the alpha and omega classes take care of this for you but the mobile layout displays all of the content in line, rendering the concept of ‘first’ and ‘last’ irrelevant even if mobile.css were to include a rule for them. In light of this I humbly propose the following alternate for mobile.css to correct the doubled margins:

Your mileage may vary, but hopefully this suggested correction at least gets you thinking in the right direction. Best of luck!

Like this post? Share it!