top of page
Device Width
"Device-width" refers to the physical or screen width of a user's device (like a phone, tablet, or monitor). 

1. Mobile phones

  • 320px (small phones)

  • 375px (iPhones)

  • 414px (large phones)

​​

2. Tablets

  • 768px (iPad portrait)

  • 1024px (iPad landscape)

​​

3. Laptops / Desktops

Most websites use:

  • 1200px max‑width (very common)

  • Sometimes 960px, 1024px, 1440px

Example: Content width

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <Allows all characters (letters, symbols, emojis>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <Makes the website responsive on phones and tablets>
<title>Sets the browser tab name </title>

​

<style> <Contains all the CSS that styles the page>
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Header */
header {
  background: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Navigation */
nav {
  background: #444;
  padding: 10px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

nav ul li {
  margin: 10px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  padding: 8px 15px;
  background: #555;
  border-radius: 5px;
}

/* Layout container */
.container {
  display: flex;
  padding: 20px;
  gap: 20px;
}

/* Sidebar */
.sidebar {
  flex: 1;
  background: #f0f0f0;
  padding: 20px;
}

/* Main content */
.main {
  flex: 3;
  background: #e8f4ff;
  padding: 20px;
}

/* Footer */
footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 15px;
  margin-top: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<header>
  <h1>My Responsive Website</h1>
</header>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<div class="container">
  <div class="sidebar">
    <h2>Sidebar</h2>
    <p>This section moves below the main content on small screens.</p>
  </div>

  <div class="main">
    <h2>Main Content</h2>
    <p>This area expands on larger screens and shrinks on smaller ones.</p>
  </div>
</div>

<footer>
  <p>© 2026 My Website</p>
</footer>

</body>
</html>
 

bottom of page