Making Templates Responsive

Ensure your theme looks great on all devices, from mobile phones to desktops.

In today's mobile-first world, a responsive theme is non-negotiable. This is achieved using standard CSS techniques like media queries, flexible grids, and fluid images.

The Viewport Meta Tag

The first and most important step is to include the viewport meta tag in your theme's `<head>` section. This tells mobile browsers how to scale the page.

Using CSS Media Queries

Media queries are the core of responsive design. You use them to apply different CSS rules based on the screen size. For example, you might have a two-column layout on desktop that collapses to a single column on screens smaller than 768px.

Code Examples

htmlViewport Meta Tag
1
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
cssSimple Media Query Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* Default styles for all screen sizes */
.container {
  width: 90%;
  margin: 0 auto;
}
 
.main-content {
  width: 100%;
}
 
.sidebar {
  width: 100%;
}
 
/* Styles for screens 768px and wider */
@media screen and (min-width: 768px) {
  .container {
    display: flex;
    gap: 20px;
  }
  .main-content {
    width: 70%;
  }
  .sidebar {
    width: 30%;
  }
}

Was this lesson helpful?

Have feedback, found an issue, or have a suggestion? Let us know!

Send Feedback