CSS max-width Property Tutorial with Examples for Responsive Design

CSS Max-Width

The max-width property in CSS is used to set the maximum width of an element. It helps in creating responsive designs by preventing elements from stretching too wide across the screen.

Why Use max-width ?

Controls the maximum width an element can grow to.

Improves readability on large screens.

Prevents layout breakage in responsive design.

Often used with text blocks, images, and containers.

Syntax:

selector {
  max-width: value;
}

Values:

Value	Description
none	No maximum width; element can grow indefinitely.
length	Fixed size like px, em, pt, cm, etc.
initial	Sets the property to its default value.
inherit	Inherits the value from its parent element.

Example: Using Different Units for max-width

This example shows how different units affect the width of text blocks.

<!DOCTYPE html>
<html>

<head>
  <title>max-width property</title>
  <style>
    p {
      border: 4px solid blue;
      background-color: lightblue;
      font-size: 20px;
      padding: 10px;
      margin-bottom: 20px;
    }

    #px {
      max-width: 175px;
    }

    #em {
      max-width: 20em;
    }

    #pt {
      max-width: 350pt;
    }

    #cm {
      max-width: 10cm;
    }
  </style>
</head>

<body>

  <h2>max-width: 175px</h2>
  <p id="px">
    Welcome to quipoin.com! This tutorial explains the max-width property in CSS, which is useful for creating
    responsive web designs that adapt to various screen sizes.
  </p>

  <h2>max-width: 20em</h2>
  <p id="em">
    Welcome to quipoin.com! This tutorial explains the max-width property in CSS, which is useful for creating
    responsive web designs that adapt to various screen sizes.
  </p>

  <h2>max-width: 350pt</h2>
  <p id="pt">
    Welcome to quipoin.com! This tutorial explains the max-width property in CSS, which is useful for creating
    responsive web designs that adapt to various screen sizes.
  </p>

  <h2>max-width: 10cm</h2>
  <p id="cm">
    Welcome to quipoin.com! This tutorial explains the max-width property in CSS, which is useful for creating
    responsive web designs that adapt to various screen sizes.
  </p>

</body>

</html>

Output:

Key Point

max-width is perfect for preventing elements from stretching too much on large screens.

Use with flexible units (em, %, vw) for responsive design.

Commonly paired with width: 100% to allow scaling within limits.