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:

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. This will work on desktops when the window is narrowed.  */
}

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.