Quartz 4

How to Create Responsive Websites

5 min read

Metadata

  • 📅 Date :: 19-04-2025
  • 🏷️ Tags :: web-dev

Notes

📱 Responsive Web Design – Comprehensive Notes

✅ What Is Responsive Web Design?

Responsive web design is an approach to building websites so that they adapt to different screen sizes and devices — whether it’s a desktop, laptop, tablet, or mobile phone.

✨ Key Principle:

“Build once, look great everywhere.”

The content and layout of your site should respond to the device’s screen size, orientation, resolution, and other characteristics — without needing separate versions for each device.

🧠 Why Responsiveness Matters?

Modern users access websites from various devices:

  • Large desktop monitors

  • Medium-sized laptops

  • Tablets like iPads

  • Small mobile phones

Each device has different screen dimensions, so it’s important that:

  • Navigation remains usable

  • Text is readable

  • Images scale properly

  • The layout doesn’t break

🧪 Try It Yourself: Quick Experiment

  1. Open a website (e.g., your favorite news site or social media).

  2. Resize your browser window by dragging the corners or sides.

  3. Observe what changes:

    • Does the layout adapt?

    • Do elements collapse into a menu?

    • Do items get hidden on smaller screens?

    • Are fonts and images resizing smoothly?

🧰 Tools for Creating Responsive Layouts

There are four major tools/systems used to build responsive websites:

MethodDescriptionIdeal For
Media QueriesApply CSS conditionally based on screen sizeCustom breakpoints
CSS GridLayout using rows and columns (2D)Complex layouts
FlexboxLayout in one direction (horizontal/vertical)Simple flexible layouts
BootstrapExternal framework built on FlexboxRapid development & consistency

1️⃣ Media Queries

📌 What is a Media Query?

A media query is a rule that applies specific CSS only when certain conditions are met (like screen width).

🧱 Syntax:

@media (max-width: 600px) {
  /* CSS rules for screens ≤ 600px width */
}

📌 Explanation:

  • @media starts the rule

  • (max-width: 600px) is the condition

  • CSS inside the block only applies if the screen is 600px wide or less

🧰 Use Cases:

  • Adjust font size for smaller screens

  • Collapse navbars into menus

  • Hide elements on mobile

✅ Example:

@media (max-width: 768px) {
  .nav-bar {
    display: none;
  }
}

On tablets and smaller devices, the navigation bar will be hidden.

2️⃣ CSS Grid

📌 What is CSS Grid?

CSS Grid is a 2D layout system that allows you to create complex layouts with rows and columns.

📐 Layout Basics:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 200px 200px;
  gap: 30px;
}

Explanation:

  • display: grid;: activates grid layout

  • grid-template-columns: 1fr 1fr;: creates 2 equal columns

  • grid-template-rows: 100px 200px 200px;: defines row heights

  • gap: 30px;: space between grid items

🧰 Use Cases:

  • Magazine-like layouts

  • Dashboards

  • Responsive content cards

🧠 Bonus – Grid Spanning:

To make an element span across multiple columns:

.first {
  grid-column: span 2;
}

This makes .first span both columns — useful for headers or full-width elements.

3️⃣ Flexbox

📌 What is Flexbox?

Flexbox is a 1D layout system, ideal for aligning items in a row or column.

✍️ Basic Setup:

.container {
  display: flex;
}
.card {
  flex: 1;
  height: 100px;
}

  • display: flex;: activates Flexbox

  • flex: 1;: each card gets equal space

📊 Custom Flex Ratios:

.card1 { flex: 2; }   /* Twice the width */
.card2 { flex: 0.5; } /* Half the width */

This creates proportional widths based on a ratio system, not fixed pixel sizes.

🧰 Use Cases:

  • Navigation bars

  • Card layouts

  • Centering elements

  • Vertical stacking

🌐 Direction Control:

  • flex-direction: row; (default)

  • flex-direction: column; (stack vertically)

4️⃣ Bootstrap Framework

📌 What is Bootstrap?

Bootstrap is a CSS framework developed by Twitter that provides:

  • Pre-designed components

  • Responsive grid system

  • Utility classes

  • Built-in responsiveness

🔧 Setup:

You link to Bootstrap via CDN or install it via npm/yarn.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

📊 Grid System:

Bootstrap uses a 12-column grid:

  • .col-6 = half width

  • .col-4 = one-third width

  • .col-12 = full width

📦 Example:

<div class="row">
  <div class="col-6">50%</div>
  <div class="col-3">25%</div>
  <div class="col-3">25%</div>
</div>

📱 Responsive Classes:

  • .col-md-6: apply on medium screens and up

  • .col-sm-12: apply on small screens (stack vertically)

🧰 Use Cases:

  • Rapid prototyping

  • Prebuilt navbars, cards, buttons

  • Mobile-first responsive layouts

📚 Summary: Which One Should You Use?

There is no “best” method — they are tools, and you should choose based on what you need.

ToolBest Used When…
Media QueryYou need different CSS for different screen sizes
CSS GridYou need a two-dimensional layout (rows + columns)
FlexboxYou need linear layouts (row OR column)
BootstrapYou want quick development and ready-made components

Like a toolbox: use the right tool for the right job.

🎮 Practice and Play

🔨 What To Do:

  1. Download practice code (from lesson folder like 8.2 Responsiveness)

  2. Open in VS Code

  3. Preview index.html

  4. Try modifying:

    • Media queries

    • Grid layouts

    • Flex properties

    • Bootstrap classes

🧪 Tips:

  • Break things on purpose! You’ll learn more.

  • Resize the browser constantly as you test.

  • Combine techniques (e.g., Grid + media queries)

📌 Final Thoughts

  • Responsive design is essential in today’s multi-device world.

  • You don’t need to learn it all at once — but practicing bit by bit builds mastery.

  • We’ll dive deeper into each layout method in the following lessons — starting with Media Queries.

References

Graph View

Backlinks