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.