How to Create a Simple Responsive Website Layout with CSS

Creating a responsive website layout ensures your site looks great on all devices—mobile, tablet, or desktop. In this tutorial, we’ll easily build a responsive layout step-by-step using simple CSS techniques.

Step 1: HTML Structure

First, create a basic HTML layout including a header, navigation, content area, sidebar, and footer.

Example HTML:

<body>
  <header>Header</header>
  <nav>Navigation</nav>
  <main>
    <section class="content">Content Area</section>
    <aside class="sidebar">Sidebar</aside>
  </main>
  <footer>Footer</footer>
</body>

Step 2: Basic CSS Styling

Add some initial styles for layout:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header, nav, footer {
    padding: 20px;
    text-align: center;
}

header { background-color: #f8b400; }
nav { background-color: #222; color: white; }
footer { background-color: #ddd; }

main {
    display: flex;
    padding: 20px;
}

.content {
    flex: 3;
    background-color: #f2f2f2;
    padding: 20px;
}

.sidebar {
    flex: 1;
    background-color: #e2e2e2;
    padding: 20px;
    margin-left: 20px;
}

Step 3: Make the Layout Responsive

To ensure your layout works well on all devices, we’ll add CSS media queries.

/* Tablets and smaller screens */
@media (max-width: 768px) {
    main {
        flex-direction: column;
    }
    .sidebar {
        margin-left: 0;
        margin-top: 20px;
    }
}

/* Mobile screens */
@media (max-width: 480px) {
    nav, header, footer {
        padding: 15px;
    }

    .content, .sidebar {
        padding: 15px;
    }
}

Now your layout stacks vertically on smaller screens for better readability.

Step 4: Making Images and Videos Responsive

Include this CSS to make images and videos adapt nicely:

img, video {
    max-width: 100%;
    height: auto;
}

Step 5: Testing Your Responsive Layout

Always test your layout using browser DevTools to simulate different screen sizes:

Open DevTools (Ctrl + Shift + I or Cmd + Option + I).
Click the Device toolbar icon.
Test on various device sizes to ensure your layout looks great everywhere.

Best Practices for Responsive Layouts

Use a Mobile-first approach: Design for mobile first, then scale up.
Keep your layouts simple: Simple designs adapt better to various screens.
Use relative units (%, em, rem) instead of fixed pixels for better responsiveness.

Conclusion

Creating responsive layouts is essential for modern web design. Follow these steps, use media queries, and continuously test your layout. This ensures your website looks great and provides an excellent experience across all devices.

Harshit Sharma

Harshit Sharma

How to Create a Simple Responsive Website Layout with CSS