CSS min-width and max-width Properties

The min-width and max-width properties in CSS define minimum and maximum boundaries or dimensions of an element’s box. These properties are useful when you need to constrain an element’s width from either expanding or shrinking beyond certain extents.

A constraint is a value beyond which an element’s box is not allowed to expand or contract. If the screen size is smaller than the minimum constraint (min-width), the element’s width will be set to that minimum value. If the screen size is larger than the maximum constraint (max-width), the element’s width will be set to that maximum value.

When we design content to adapt to multiple screen resolution, it is sometimes helpful to define constraints (i.e. min-width and max-width) for the content to stop stretching or stopping contracting.

For example, if you have mainly designed a website with an 800×600 or 1024×768 screen resolution in mind, a user viewing your website at 1600×1200 pixels may see the content stretched too thin if the auto keyword or percentage values are used to define the width.

This is where the CSS properties min-width, max-width, min-height, and max-height come into play. In this tutorial, we will understand min-width and max-width in CSS with the help of various examples.

min-width and max-width Properties in CSS

The min-width and max-width properties allow us to set a minimum and maximum width for an element’s box. It is generally useful when you want to design a web page that stretches and shrinks to fit the size of user’s screens.

The min-width property will stop an element’s box from being so narrow that they are unreadable and the max-width property will stop an element’s box from being so wide that it is difficult to read.

It is important to note that IE7 and FF2 were the first of the major browsers to support these properties. We can specify the value of these properties in units like pixels, em, rem, percentage, etc. However, negative values are not allowed for these properties.

Syntax to Define min-width and max-width Properties

The general syntax to define min-width and max-width properties in CSS is as:

selector {
    min-width: value;
    max-width: value;
}

In this syntax, selector represents an HTML element you want to apply the styles to. The “value” is the desired width, which you can specify in units such as pixels (px), em, rem, percentages (%), etc.

Let’s take an example in which we will specify min-width and max-width properties for a div element.

Example 1:

<!DOCTYPE html>
<html>
<head>
     <title>CSS min-width and max-width Example</title>
<style>
div {
   min-width: 200px;
   max-width: 500px;
   padding: 10px;
   border: 1px solid #000000;
}
</style>
</head>
<body>
    <div>The width of this element is explicitly set with the min-width of 200px and max-width of 500px. This means that div element may not be less than 200px wide and no wider than 500px wide.
    </div>
</body>
</html>

Output:

In this example, we have set the min-width and max-width properties with 200px and 500px, respectively. The div element will take up the full width of its container, but it will not be smaller than 200px and wider than 500px.

min-width and max-width Properties with Media Queries

Let’s take an example in which we will use min-width and max-width properties with media queries to create a responsive web page.

Example 2:

<!DOCTYPE html>
<html>
<head>
    <title>min-width and max-width properties with Media Queries Example</title>
<style>
.container {
    background-color: lightgrey;
    padding: 20px;
}
/* Base styles */
.box {
   width: 80%;
   min-width: 200px;
   max-width: 600px;
   margin: 0 auto;
   background-color: lightcoral;
   text-align: center;
   padding: 20px;
}
/* Media query for small screens */
@media (max-width: 600px) {
   .box {
       width: 100%;
       min-width: 150px;
       max-width: none;
   }
}
/* Media query for medium screens */
@media (min-width: 601px) and (max-width: 1199px) {
   .box {
      min-width: 250px;
      max-width: 700px;
   }
}
/* Media query for large screens */
@media (min-width: 1200px) {
   .box {
       max-width: 800px;
    }
}
</style>
</head>
<body>
   <div class="container">
      <div class="box">
           Resize the browser window to see how this box's width changes with different screen sizes.
      </div>
   </div>
</body>
</html>

Output:

In this example, we have set the .box class with a flexible width of 80%, a min-width of 200px and a max-width of 600px. This means that the element’s box won’t be narrower than 200 pixels or wider than 600 pixels.

For small screen sizes that are 600px wide or smaller, the media query adjusts the .box to take up the full width (100%) of its container, with a reduced min-width of 150px and no max-width.

For medium screen sizes that are between 601px and 1199px wide, the media query sets a min-width of 250px and a max-width of 700px. It adjusts the size of an element’s box to better fit medium-sized screens.

On the other hand, for large screen sizes that are 1200px wide or larger, the media query increases the max-width of the .box to 800px, allowing it to be wider on large displays. Thus, the element adapts gracefully to different screen sizes, maintaining usability and visual appearance.

Best Practices to Use These Properties

There are the following key points that you should keep in mind to use min-width and max-width properties in CSS style rule. They are as:

You should use min-width and max-width properties to create flexible layouts that might work well on different screen sizes.
You should avoid the setting a fixed width and use these properties for making readable content across different screen sizes.
Combine media queries to adjust min-width and max-width values for different screen sizes so that your web design remains responsive and adapts well to various devices.