[Free] Next Level Tutorial - Column Control + Bonus Tutorial

Understand how to control the way columns display on desktop and mobile devices. – Free Course

Added on October 22, 2024 Design 2 min read

What you’ll learn

Undertand containers, rows and columns on a web page
Understanding how these columns will look on a desktop
Understanding how these columns will look on a mobile
Learning how to control the way the coloumns respond on mobile

Requirements

The is a follow up tutorial to the foundation course – you should complete the foundation course before moving on to these specific task tutorials

Description

Please Note. This next level tutorial assumes you have already completed the ‘Become a freelance web developer using WordPress’ foundation course.

If you have not completed the foundation course you may not be familiar with the WordPress theme using in the tutorial and the functions within the theme may not be available on other WordPress themes.

COLUMN CONTROL TUTORIAL

In this short next level tutorial course we look at a specific task only – how to control the way columns within rows on your web page display depending on the device being used to view the page.

In the first module we explain exactly what the issue is, so you can understand and identify when the problem might occur as you build your web pages.

In the second module we offer a quick and dirty fix to resolve the issue using the show/hide on different devices tools within the WordPress theme we are using. This soltions works very well, and is worth knowing in itself, but it can become a bit of a maintenance headache if your pages contain a lot of rows and columns with text and images on alternate sides.

Finally in module 3 we look at a clean and efficient CSS solution to the problem which is far more scalable and much easier to maintain, and once implemented can be used again and again as required throughout your website.

BONUS TUTORIAL

As a supplement to this tutorial and as a bonus I have included another tutorial which theaches you how to achive the page layout used in the Column Control tutorial.

Author(s): Andrew Turner