Media Queries

Media queries help us change how the webpage looks depending on the size of the screen. The list of countries is very long in this example. Use media queries to show the list in multiple columns when the screen is wide enough.

In this exercise, the following CSS will put the countries into two columns:

.countries {
	columns: 2;
}

Follow the steps below to complete this exercise.

1. Open columns.css and write a media query so that the countries are in two columns when the screen is wider than 768px.
2. Write another media query so that the countries are in three columns when the screen is wider than 1200px.
3. Change the size of your browser window to see how it reacts to different widths.