How to Create Responsive Websites

on

🌐 What is Responsive Web Design?


Nowadays, people use the internet on different devices — desktop, laptop, tablet, mobile, and more.So, our websites must be designed in such a way that they look good and work properly on every device.This is called Responsive Web Design.

👉 Try this: Resize your browser window. You’ll notice:

  • On full screen, all navigation menu items are visible.

  • When the screen gets smaller, the menu items disappear.

  • Actually, they collapse into a menu icon (hamburger).

  • If you make it even smaller, the search bar also hides (because it’s not practical on mobile).

This is how a website automatically adapts responsively.

🛠 4 Main Methods to Make a Website Responsive

There are four popular techniques to make websites responsive:

  1. Media Queries

  2. CSS Grid

  3. CSS Flexbox

  4. Bootstrap (Framework)

1️⃣ Media Queries

This is the simplest method.
In CSS, you can set a condition — when the screen width goes below a certain breakpoint, a different style will be applied.

👉 Example:

@media (max-width: 600px) {
  body {
    background: lightblue;
  }
}

Meaning: If the screen width is 600px or less, the background color will change to light blue.
This way, you can apply different layouts at different breakpoints.

2️⃣ CSS Grid

Grid is great for creating 2D layouts (rows + columns).
You place multiple div elements inside a container, then set the container to display: grid;.

👉 Example:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* Two equal columns */
  grid-template-rows: 100px 200px 200px; /* Three rows */
  gap: 30px;
}

  • 1fr 1fr means two equal columns.

  • Rows can be defined in px or fractions.

  • You can also span an element across multiple columns or rows.

With Grid, you can create complex layouts with very little code.

3️⃣ CSS Flexbox

Flexbox is best for 1D layouts (row OR column).
You set the container to display: flex;, and child elements get flexible ratios.

👉 Example:

.container {
  display: flex;
}
.card {
  flex: 1; /* Equal share */
}
.card.first {
  flex: 2; /* First div will be double width */
}
.card.second {
  flex: 0.5; /* Second div will be half width */
}

Here, widths (or heights) are divided proportionally.
Since it’s percentage-based, Flexbox is responsive by default.

4️⃣ Bootstrap Framework

Bootstrap is an external CSS framework built on Flexbox.
It comes with a 12-column grid system.

👉 Example:

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

  • col-6 means 6 out of 12 columns (50% width).

  • Similarly, col-4 means 4/12 = 33% width.

  • Bootstrap also provides built-in ready-made components like cards, buttons, navbars, etc., which make development much easier.

🎯 Key Takeaways

  • Media Queries → Simple, breakpoint-based CSS.

  • CSS Grid → Best for complex 2D layouts.

  • CSS Flexbox → Ideal for 1D layouts (row/column).

  • Bootstrap → A framework with ready-made responsive designs.

Responsive design is no longer optional — it’s a must-have for every modern website.

Comments

Post a Comment