Picture of Michael Lee
:wave: Hey hey, I'm @michaelsoolee! I'm a full-stack developer, maker of one too many side projects and dad.

First step to making your website responsive

Written on June 5, 2019

The very first step on making your website responsive after putting together content is to add a meta tag with the name attribute set to viewport between your site’s head tags.

The meta tag should look like this,

<meta name="viewport" content="width=device-width, initial-scale=1">

What this meta tag does is to tell the browser to set its viewport to be scaled to fit the screen of the device you’re viewing it on.

In your site’s head tags, this is what it should look like,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello reader!</title>
</head>
<body>

</body>
</html>

Adding this single line to your HTML file will set you up in the right direction to make your website responsive.

Stay in touch

Thanks for reading this article. I'd love to stay in touch and share more tips on programming, design and side projects with you. Sign up and I'll send you my articles straight to your email.