Quick Tip: Altering the column structure for 5, 7, 9 and 11 column layouts within Base framework

We've had a couple of support emails lately from users asking how to display 5, 7, 9 and 11 columns within the 12 column grid without leaving any space at either side.

You can already display these number of columns however in these scenarios we want them to span the full width of the 12 column structure.

The best way to illustrate this to users was by creating a codepen that would allow them to grab and implement with minimal fuss. Below you will see our solution on how to implement this on our own Base frontend framework that is still used in some of our Umbraco themes.

Note: You should click through to the Codepen website to see the result as the one rendered below will show the mobile layout since this column is below 768px wide. 

See the Pen 5, 7, 9 & 11 column layouts with Base frontend framework by Paul (@daly85) on CodePen.

We will be moving all themes to Bootstrap in the coming months so this won't be relevant forever therefore we will also post another tips & tricks article explaining how to achieve this with Bootstrap.

comments powered by Disqus

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Umbraco themes to deliver results for their business.