CSS Responsive Web Design

By /

In this chapter, you will learn about CSS Responsive Web Design. Today, people use websites on mobile phones, tablets, laptops, and large desktop screens. A responsive website adjusts its layout so that it looks good and works properly on different screen sizes. Let’s understand the basics of CSS Responsive Web Design step by step.

What is CSS Responsive Web Design?

CSS Responsive Web Design means creating a website that can adjust to different screen sizes. For example:

  • A layout may show three columns on a desktop.
  • The same layout may show one column on a mobile phone.

Responsive design helps users view and use your website comfortably on different devices.

1. The Viewport Meta Tag

Before creating a responsive webpage, you should add the viewport meta tag inside the <head> section.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tells the browser to adjust the page width according to the device’s screen size.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Web Design</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    h1 {
      color: blue;
    }
  </style>
</head>

<body>

  <h1>Responsive Web Page</h1>

  <p>
    This page can adjust properly to different screen sizes.
  </p>

</body>
</html>

The viewport tag is an important starting point for responsive web design.

2. Using Flexible Widths

Avoid giving every element a fixed width. For example:

.box {
  width: 100%;
}

A percentage allows the element to adjust according to the available space.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Flexible Width</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .box {
      width: 80%;
      margin: auto;
      padding: 30px;
      background-color: lightblue;
      text-align: center;
    }
  </style>
</head>

<body>

  <div class="box">
    This box uses a flexible width.
  </div>

</body>
</html>

The box takes 80% of the available screen width, so it can adjust when the screen size changes.

3. Using max-width

Sometimes, an element should be flexible but should not become too wide. This is where max-width is useful.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Max Width</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .container {
      width: 100%;
      max-width: 800px;
      margin: auto;
      padding: 20px;
      background-color: lightgreen;
    }
  </style>
</head>

<body>

  <div class="container">

    <h1>Responsive Container</h1>

    <p>
      This container adjusts on smaller screens but does not become wider than 800px.
    </p>

  </div>

</body>
</html>

Here:

  • width: 100% allows the container to use available space.
  • max-width: 800px prevents it from becoming too wide.

This is commonly used for website containers.

4. Responsive Images

Images should also adjust according to the screen size. A common way is:

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

This prevents an image from becoming wider than its container.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Image</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    img {
      max-width: 100%;
      height: auto;
    }

    .container {
      width: 80%;
      margin: auto;
    }
  </style>
</head>

<body>

  <div class="container">

    <h1>Responsive Image</h1>

    <img src="https://via.placeholder.com/800x400" alt="Example Image">

  </div>

</body>
</html>

The image will shrink when needed instead of overflowing outside its container.

5. Using Relative Units

Responsive websites often use relative units instead of only fixed values. Some useful units are:

  • %
  • em
  • rem
  • vw
  • vh

Percentage (%)

A percentage is based on the size of its parent element.

width: 50%;

Viewport Width (vw)

vw is based on the width of the browser window.

width: 50vw;

This means the element takes 50% of the viewport width.

Viewport Height (vh)

vh is based on the height of the browser window.

height: 50vh;

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Relative Units</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .box {
      width: 50vw;
      height: 30vh;
      background-color: lightblue;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="box">
    This box uses viewport units.
  </div>

</body>
</html>

As the browser size changes, the size of the box also changes.

6. Flexible Layouts with Flexbox

Flexbox can help create layouts that adjust based on available space.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Flexbox</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .box {
      flex: 1;
      min-width: 200px;
      padding: 30px;
      background-color: lightblue;
    }
  </style>
</head>

<body>

  <div class="container">

    <div class="box">
      Box 1
    </div>

    <div class="box">
      Box 2
    </div>

    <div class="box">
      Box 3
    </div>

  </div>

</body>
</html>

Here:

  • flex-wrap: wrap allows boxes to move to the next line when there is not enough space.
  • min-width: 200px prevents boxes from becoming too small.

7. Flexible Layouts with CSS Grid

CSS Grid can also create responsive layouts.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Responsive CSS Grid</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }

    .box {
      padding: 30px;
      background-color: lightgreen;
      text-align: center;
    }
  </style>
</head>

<body>

  <div class="container">

    <div class="box">Box 1</div>

    <div class="box">Box 2</div>

    <div class="box">Box 3</div>

    <div class="box">Box 4</div>

  </div>

</body>
</html>

The number of columns automatically adjusts based on the available space. This is useful for cards, product sections, and other responsive layouts.

8. Avoiding Fixed Sizes

Fixed widths can cause problems on smaller screens.

For example:

width: 1000px;

A box with a fixed width of 1000px may overflow on a mobile phone. A better approach can be:

width: 100%;
max-width: 1000px;

This allows the element to adjust on smaller screens while keeping a maximum size on larger screens.

9. A Simple Responsive Layout

Let’s create a simple layout that works well on different screen sizes.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Simple Responsive Layout</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .container {
      width: 90%;
      max-width: 1000px;
      margin: auto;
    }

    .cards {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .card {
      flex: 1;
      min-width: 200px;
      padding: 30px;
      background-color: lightblue;
      text-align: center;
    }
  </style>
</head>

<body>

  <div class="container">

    <h1>Our Courses</h1>

    <div class="cards">

      <div class="card">
        HTML
      </div>

      <div class="card">
        CSS
      </div>

      <div class="card">
        JavaScript
      </div>

    </div>

  </div>

</body>
</html>

This layout uses flexible widths and flex-wrap, allowing the cards to adjust when the screen becomes smaller.

Quick Recap

  • Responsive Web Design helps websites work on different screen sizes.
  • The viewport meta tag is important for mobile devices.
  • Use flexible widths such as % and 100%.
  • Use max-width to prevent elements from becoming too wide.
  • Use responsive images with max-width: 100%.
  • Relative units such as %, vw, and vh can help create flexible layouts.
  • Flexbox and Grid are useful for responsive layouts.
  • Media Queries provide more control over different screen sizes.

Frequently Asked Questions (FAQs)

Q1. What is CSS Responsive Web Design?

CSS Responsive Web Design is the process of creating websites that adjust their layout and content to work properly on different screen sizes and devices.

Q2. Is this Responsive Web Design Tutorial suitable for beginners?

Yes, this Responsive Web Design Tutorial is suitable for beginners and explains responsive layouts using simple CSS examples, flexible widths, images, Flexbox, and Grid.

Q3. Why is the viewport meta tag important in responsive web design?

The viewport meta tag helps a website adjust its width according to the device screen, making it an important part of creating a responsive website using CSS.

Q4. How do I create a responsive website using CSS?

You can create a responsive website using CSS by using flexible widths, max-width, relative units, responsive images, Flexbox, and CSS Grid.

Q5. Can Flexbox and CSS Grid be used for responsive layouts?

Yes, Flexbox and CSS Grid are useful for creating a CSS responsive layout because they allow elements to adjust and rearrange based on the available screen space.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top