Increase the Spacing between Columns in FrogLearn


Categories
Tags

Give your content a little breathing room by increasing the spacing between the columns in your themes.

FrogLearn Staff Dashboard

Though this article is related to the FrogLearn LMS, the concepts and strategies can be used effectively in web design in general.


Whitespace

By default, FrogLearn’s theme layout gives you around 12px of space between columns. This gives more space to cram your content into but it’s at the expense of whitespace. I’m a big fan of whitespace, it can make your content easier to read and follow whilst adding a more professional look and feel. A busy web page can be hard to digest and navigate.

Here’s an example of some content displayed in a three column layout with the default column spacing:

It looks ok, but it’s a little hard to distinguish where one content area finishes and another starts. It’s all a bit tight. This makes it difficult to draw attention to key chunks of content like important site links. You can add blank spacing vertically with the blank space widget but not horizontally. Plus, it’d be far more practical to increase the spacing site-wide with one reusable snippet of code wouldn’t it? We’ll get to that bit soon.

Taking things to the extreme, here’s an example of a very busy web page on the Daily Mail website:

Pretty distracting right? It’s displaying a lot of content but the lack of spacing doesn’t help either. Just a little padding between columns can make a massive difference.

Take a look at the example below, this is the desired effect I’m looking for:

Better? I think so, it’s now really clear where one chunk of content ends and another begins. Your eyes are drawn to one block of content at a time and it’s much cleaner and professional looking too.


The Code

You can achieve the same results on your FrogLearn themes with just a little CSS. Drop a HTML widget onto the homepage of your theme and add the code below. This wont work out of the box, you’ll need to change the class named my_theme to match the main class that’s wrapped around your particular theme. You can look this up by inspecting the page with the developer tools in your browser.

<style>
	/* increase spacing between columns */
	@media (min-width:800px) {
		.my_theme .two,.my_theme .three,.my_theme .four{
			padding:0 1em;
		}
	}
</style>

Pretty straightforward really. I’ve not gone mad here, I’ve just added 1em of padding to the sides of each column. You can adjust this value to get the desired spacing for your theme. I’ve also put this inside a media query so it’ll only take effect on screens with 800px of width or higher, since the spacing looks perfectly fine when the columns are vertically stacked on mobile devices.

It’s worth noting that this technique works best on full width themes, or themes where the main content block has a width of 1000px or greater. Anything less than that is going to look pretty squashed either way if you’re using three columns or more, but it’s worth experimenting with.

Found this useful? Have any other tricks you’d like to share? Feel free to add these in the comments below.

Comments

We welcome comments! Please read the disclaimer.

Disclaimer and Legal Information

The use of any content found on or via this website (code, how to guides etc.) is done so at your own risk. We take no responsibility for any issues encountered.

This blog and its authors will not be held responsible for any misuse, reuse, recycled and cited/uncited copies of content from this website by others.

The views and opinions expressed in this blog are those of the authors and do not necessarily reflect the position or opinion of any other agency, organisation, employer or company.

Comments are moderated but we do not take any responsibility for any libel or litigation that results from something written in a comment. We reserve the right to reject or delete any comment for any reason whatsoever (abusive, profane, rude etc). Please keep your comments polite and relevant.

We are happy for you to quote and share our content in any reasonable manner, e.g. post links to our blogs on social media, but not in any way that suggests that we, or our authors, endorse you, your use or your views.

We appreciate attributions, e.g. a link to our website (www.dragoncode.co.uk).