HTML and CSS course · Module 5: Responsiveness
Responsiveness in CSS
In this lesson4
Today the same page lands on a phone held in one hand, on a tablet and on a wide monitor. A layout that fits three columns on a computer turns into an unreadable squeeze on a phone. Before building anything, an Egyptian architect always asked: how much space do we have? In this location you will teach your page to ask the same question.
What you will learn
- check the screen width with media queries,
- combine conditions and choose breakpoints for phones, tablets and computers,
- set the viewport so that a phone shows the page at its real scale,
- build fluid containers and use the
vwandvhunits, - fit images to the screen and design with the mobile-first approach,
- put it all together in a responsive gallery.
Introduction
Responsiveness in CSS refers to the ability of a website to dynamically adapt to different screen sizes and devices, such as desktop computers, laptops, tablets and smartphones. Thanks to responsive design, a website can offer an optimal user experience no matter how it is displayed.
Media Queries
The basic tool for creating responsive design in CSS is the so-called media query. Media queries let you apply different styles depending on the characteristics of the device, such as screen width, orientation and resolution. Each one starts with @media, followed by a condition in parentheses and, in curly braces, the rules that should apply only when the condition is met. The min-width condition means: from this width upwards, and max-width: up to and including this width.
Example: Changing styles at different screen widths
You can use media queries to apply different styles depending on the screen width. Here are two blocks that split screens into those narrower and those wider than 600 pixels:
1/* Styles for screens 600px wide or larger */
2@media (min-width: 600px) {
3 .container {
4 width: 80%;
5 margin: 0 auto;
6 }
7}
8
9/* Styles for screens narrower than 600px */
10@media (max-width: 599px) {
11 .container {
12 width: 100%;
13 padding: 10px;
14 }
15}In the example above, for screens 600px wide or more, the container has a width of 80% and centered margins. For screens narrower than 600px, the container takes the full width and gets extra padding. Notice the 599px in the second condition: both conditions include their boundary value, so if the second one also said 600px, both blocks would apply at exactly that width.
Example: Changing layout direction for tablets and smartphones
You can also use media queries together with Flexbox to change the layout depending on the screen size. By default, the container lays out its elements in a row, and on a narrower screen it switches to a column:
1.container {
2 display: flex;
3 flex-direction: row; /* Default layout for larger screens */
4}
5
6/* For screens narrower than 768px, change direction to column */
7@media (max-width: 768px) {
8 .container {
9 flex-direction: column;
10 }
11}In this case, for screens up to 768px wide, the layout direction changes to a column. The HTML stays the same, only the way it is arranged changes.
Combining conditions
Sometimes a style should apply only within a certain range, for example only on tablets. Then you combine two conditions with the word and, and the rules apply only when both are met:
1/* Tablet: from 768px to 1024px */
2@media (min-width: 768px) and (max-width: 1024px) {
3 .container {
4 width: 90%;
5 margin: 0 auto;
6 }
7}On a phone and on a wide monitor this block will not switch on, because one of the conditions is always false. Thresholds like these are called breakpoints. A popular split is phones up to 767px, tablets from 768px to 1024px and computers from 1025px, but that is a convention, not a standard. My advice: put a breakpoint where your layout starts to break, not where a particular phone model ends.
Summary
Responsiveness in CSS is key to building websites that look and work well on different devices and screen sizes. With media queries you can flexibly adapt the look of a page to different conditions, providing excellent presentation and comfortable use across platforms. For media queries to work on phones, however, the page needs one tag in its head section, which I will tell you about in the next lesson.
In the editor below you will find media queries in practice, responsive Flexbox and Grid, units, images and a breakpoint demo. Change the width of the preview and watch which rules switch on.
Code for this lesson: index.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Responsiveness in CSS</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <div class="container">
11 <header class="header">
12 <h1>Responsiveness in CSS</h1>
13 <p>Change the browser window size to see the effects</p>
14 </header>
15
16 <nav class="navigation">
17 <ul>
18 <li><a href="#media">Media Queries</a></li>
19 <li><a href="#flexbox">Flexbox</a></li>
20 <li><a href="#grid">CSS Grid</a></li>
21 <li><a href="#units">Units</a></li>
22 <li><a href="#images">Images</a></li>
23 </ul>
24 <div class="hamburger">
25 <span></span>
26 <span></span>
27 <span></span>
28 </div>
29 </nav>
30
31 <main class="main-content">
32 <section id="media" class="section">
33 <h2>Media Queries in practice</h2>
34 <div class="media-demo">
35 <div class="responsive-box">
36 <p>This section changes color depending on screen size:</p>
37 <ul>
38 <li>Mobile (< 768px): Pink</li>
39 <li>Tablet (768px - 1024px): Blue</li>
40 <li>Desktop (> 1024px): Green</li>
41 </ul>
42 </div>
43 </div>
44 </section>
45
46 <section id="flexbox" class="section">
47 <h2>Responsive Flexbox</h2>
48 <div class="flex-responsive">
49 <div class="flex-item">Element 1</div>
50 <div class="flex-item">Element 2</div>
51 <div class="flex-item">Element 3</div>
52 <div class="flex-item">Element 4</div>
53 </div>
54 <p class="help-text">On mobile: column, on desktop: row</p>
55 </section>
56
57 <section id="grid" class="section">
58 <h2>Responsive CSS Grid</h2>
59 <div class="grid-responsive">
60 <div class="grid-item">1</div>
61 <div class="grid-item">2</div>
62 <div class="grid-item">3</div>
63 <div class="grid-item">4</div>
64 <div class="grid-item">5</div>
65 <div class="grid-item">6</div>
66 </div>
67 <p class="help-text">Automatic column adjustment to width</p>
68 </section>
69
70 <section id="units" class="section">
71 <h2>Responsive units</h2>
72 <div class="units-demo">
73 <div class="unit-box vw-box">
74 <h3>VW Units</h3>
75 <p>Width: 50vw (50% of window width)</p>
76 </div>
77 <div class="unit-box vh-box">
78 <h3>VH Units</h3>
79 <p>Height: 30vh (30% of window height)</p>
80 </div>
81 <div class="unit-box rem-box">
82 <h3>REM Units</h3>
83 <p>Size based on root font-size</p>
84 </div>
85 <div class="unit-box em-box">
86 <h3>EM Units</h3>
87 <p>Size relative to the parent</p>
88 </div>
89 </div>
90 </section>
91
92 <section id="images" class="section">
93 <h2>Responsive images and media</h2>
94 <div class="image-demo">
95 <div class="image-container">
96 <img src="https://picsum.photos/800/400?random=1" alt="Responsive image">
97 <p>Image automatically scales</p>
98 </div>
99 <div class="video-container">
100 <div class="video-placeholder">
101 <p>Responsive video</p>
102 <p>16:9 aspect ratio</p>
103 </div>
104 </div>
105 </div>
106 </section>
107
108 <section class="section">
109 <h2>Breakpoints demo</h2>
110 <div class="breakpoint-demo">
111 <div class="breakpoint-indicator mobile">Mobile</div>
112 <div class="breakpoint-indicator tablet">Tablet</div>
113 <div class="breakpoint-indicator desktop">Desktop</div>
114 <div class="breakpoint-indicator large">Large Desktop</div>
115 </div>
116 <p class="help-text">Active breakpoint is highlighted</p>
117 </section>
118 </main>
119
120 <aside class="sidebar">
121 <h3>Sidebar</h3>
122 <div class="sidebar-content">
123 <div class="widget">
124 <h4>Responsive Tips</h4>
125 <ul>
126 <li>Mobile-first approach</li>
127 <li>Flexible units (%, em, rem)</li>
128 <li>Viewport meta tag</li>
129 <li>Flexible images</li>
130 </ul>
131 </div>
132 <div class="widget">
133 <h4>Common Breakpoints</h4>
134 <ul>
135 <li>Mobile: < 768px</li>
136 <li>Tablet: 768px - 1024px</li>
137 <li>Desktop: > 1024px</li>
138 <li>Large: > 1440px</li>
139 </ul>
140 </div>
141 </div>
142 </aside>
143
144 <footer class="footer">
145 <p>© 2024 Responsive page - CSS Demo</p>
146 </footer>
147 </div>
148</body>
149</html>Remember: a responsive page is a temple that the architect fits to the building site, and media queries are his question about how much space there is this time.
Spotted a mistake in this lesson?
Check yourself
Answer the questions from this lesson. Pick an answer to see right away whether it is correct.
1. What does responsiveness mean in the context of websites?
2. How do you start a media query definition in CSS?
These are 2 of 3 questions for this lesson. Solve the rest in the game.
Hands-on tasks in the game
- Code editor
Create a responsive container for tablet using a media query. HTML: <div class='container'>Temple on tablet</div>. Base CSS: .container {width: 100%; background: #F4E4C1; padding: 20px;}. Then add @media (min-width: 768px) and (max-width: 1024px) { .container {width: 90%; margin: 0 auto; background: #FFD700; font-size: 20px; border: 3px solid #8B4513;} }. Test by resizing the window - watch how the style changes on tablet!
- Click in order
Arrange the media query syntax:
- Click in order
List the standard breakpoints: