Using CSS to organise text into columns

To improve the readability and design of your web pages you may want to organise your text into multiple columns.

See the Pen CSS Columns by 101 Computing (@101Computing) on CodePen.

Your Challenge


Change the above code to split the text in two columns instead of three.

Responsive Columns


A responsive design is a design that adapts to the size of the screen used to display the webpage.

For instance, on a wide screen, splitting your text in three columns maybe appropriate, but the columns may look “skinny” when the page is displayed on a smaller screen. (Tablet, Smart Phone…)

One technique used to adapt the look and feel is to create CSS code for different sizes of screen using the following code:

You can see what this code will do by resizing your browser window. The text should switch between two or three columns based on the width of your browser window. (For the purpose of this test, you will need to press the “Edit on CodePen” button to display this content on its own window and then be able to resize the window).

See the Pen CSS Columns – Responsive Design by 101 Computing (@101Computing) on CodePen.

Your Challenge


Change the above CSS code to add another section where the text will only use one column for screens/browser windows with a width of 650px or less.

Share Button
Posted in Computer Science, HTML / CSS

Our Latest Book

Follow this blog