Responsive WordPress Stacked Columns – Without Plugins

Responsive WordPress Stacked Columns – Without Plugins

Creating columns are a great way to organise the likes of images or paragraphs of text on your webpages. There are quite a few plugins available on WordPress that I have found which allow you to set your own amount of columns and their width using shortcodes. They are easy to use for those starting to code. However…

Problem I have found with some of these plugins (as with other plugins) – They can interfere with some plugins you have installed onto your WordPress site. In cases like these, sometimes you have to settle for the manual way.

In this tutorial I will show a simple way for you to code responsive columns within WordPress… whether you feel you are a beginner or advanced coder, it’s a simple process!

Firstly add some HTML to the page you desire this to be. Go to Page>All Pages>Page Name. Make sure you are in posting in Text, and not Visual! Add this code below. As you can see the columns are placed into a row. You can remove or add columns as you wish by pasting/deleting a line of code.

[html]
<div class="row">
<div class="column">First Column</div>
<div class="column">Second Column</div>
<div class="column">Third Column</div>
</div>
[/html]

Then to edit your stylesheet. Go to Appearance>Editor>Stylesheet.css and paste the code below. Again, you can customise to your needs. You can change the width which will set all columns at the same width, or to align your content differently.

[css]
.column {
display:inline-block;
float:none;
text-align:center;
margin-right:-4px;
width:250px;
}

.row {
text-align:center;
}
[/css]

This creates evenly spaced text across my post:

First Column
Second Column
Third Column

We can change how the columns look from the CSS.

[css]
.columnfill {
display:inline-block;
float:none;
text-align:center;
margin-right:-4px;
width:220px;
border-style: solid;
border-color: #858585;
background-color: #454647;
}

.row {
text-align:center;
}
[/css]

For each column you wish to see a background, you must change the name accordingly to match the CSS. However you can mix and match the styles within the same Row. For example, let’s see two grey columns with a transparent column to cap it off.

[html]
<div class="row">
<div class="columnfill">First Column</div>
<div class="columnfill">Second Column</div>
<div class="column">Third Column</div>
</div>
[/html]

This will turn into this… not exactly the most appealing thing to the eye, but you can see how you can customise to your taste, which most plugins do not offer:

First Column
Second Column
Third Column

Lastly I’ll show you an example of how we could use these columns to display a row of images… or when on mobile, will stack on one another.

For this example will change the CSS so that the width is smaller… we can fit more images onto the one line.

[css]
.columnimages {
display:inline-block;
float:none;
text-align:center;
margin-right:-4px;
width:150px;
}

.row {
text-align:center;
}
[/css]

Now we need to add our images into the HTML. Add Images to your WordPress site. When in your Media Center, click on the image you would like to add and copy the URL found in the Details section. Paste the URL into where we once placed the text “First Column”

[html]
<div class="row">
<div class="columnimages"><img src="http://nebula.ie/wp-content/uploads/2015/08/iconbarrier-150×150.png"></div>
<div class="columnimages"><img src="http://nebula.ie/wp-content/uploads/2015/08/iconcar-150×150.png"></div>
<div class="columnimages"><img src="http://nebula.ie/wp-content/uploads/2015/08/icondog-150×150.png"></div>
<div class="columnimages"><img src="http://nebula.ie/wp-content/uploads/2015/08/icondrown-150×150.png"></div>
</div>
[/html]

This creates a nice gallery of images… of our good “friend”, Peter Splash:

With some practice you can build onto this code to display content on your site how YOU want it to look! NO plugins needed.

You are Peter Splash, and you have the unenviable job of reading water meters on a busy Irish Street.

Web Developer & Designer

Leave a Reply

Your email address will not be published. Required fields are marked *