Introduction to Responsive Web Design
A page built with responsive web design looks good on every device it reaches.
To get there, the design adjusts itself automatically to the viewport and screen size in use.
Best Experience For All Users
A web page can be opened on a desktop, a tablet or a mobile phone.
Whichever one a visitor picks, the page has to be easy to use and still look good.
Using HTML and CSS, a responsive design automatically resizes, hides, shrinks or enlarges a website to fit all devices.
It rests on three key components:
- Viewport
<meta>tag - Flexible layout (grid and flex)
- Media queries
Example
On desktop this page layout uses a multi-column grid, and on smaller screens it becomes a single column.
Prompt
Create a responsive web page with a header, a sidebar menu, main content, a facts sidebar, and a footer using CSS Grid. Use media queries to stack the layout into a single column on screens smaller than 600px and show a two-column layout on screens between 600px and 768px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.header {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
.menu {
background-color: #999;
padding: 10px;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu li {
padding: 8px;
color: white;
}
.content {
padding: 20px;
}
.facts {
background-color: #ddd;
padding: 20px;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
/* Medium screens */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: 1fr 1fr;
}
.header, .footer {
grid-column: 1 / -1;
}
}
/* Large screens */
@media (min-width: 768px) {
.grid-container {
grid-template-columns: 150px 1fr 1fr;
}
.header, .footer {
grid-column: 1 / -1;
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header"><h1>Chania</h1></div>
<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="content">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete.</p>
<p>The city can be divided in two parts, the old town and the modern city. The old town is situated next to the old harbour and is the matrix around which the whole urban area was developed.</p>
<p>Chania lies along the north west coast of the island Crete.</p>
</div>
<div class="facts">
<h2>Facts:</h2>
<ul>
<li>Chania is a city on the island of Crete</li>
<li>Crete is a Greek island in the Mediterranean Sea</li>
</ul>
</div>
<div class="footer"><p>Resize the browser window to see the responsive effect.</p></div>
</div>
</body>
</html>