🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

Defining CSS Width: Make Excellent Designs for All Screens

Reading time 2 min
Published Nov 1, 2016
Updated Oct 2, 2019

CSS width, max-width and min-width are styling properties that allow you to determine the dimensions of an HTML element.

Defining CSS width for elements

When you're working with CSS layouts, it is very important to be able to manipulate the dimensions of the elements a document contains. To define how far a particular element stretches horizontally, you can use the CSS width property:

In CSS, element width can be specified in either length units (pt, px, cm, etc.) or percentages (%) that describe the width in relation to the block that contains the element.

Width is a fixed value. This means it will stay as wide as you specified and not react to resizing the window or viewing the page on different-sized screens. The element with a specified width can also overflow the parent container if it is smaller in width.

In some cases this might affect the user experience in a negative way. For example, an image might not fit into a small screen, making the website not mobile-friendly.

Adding responsiveness with CSS max width and min width

To make your element able to adapt to screens and windows of various sizes without adding a horizontal scrollbar, you need to understand the usage of two more properties: max-width and min-width. Both of these properties override the fixed width.

The CSS max-width property defines the widest possible point for a responsive element, which means it can get narrower but never wider than specified. CSS min-width works in an exact opposite manner: it specifies the narrowest possible point. An element can get as wide as it needs to, but never smaller than defined by the value of min-width.

In the example below, you have three similar <div> elements styled using different width CSS properties. Try resizing the window and compare the way the div width changes for each one:

Example
div.ex1 {
    width: 400px;
    margin: auto;
    border: 4px solid #256bdb;
}

div.ex2 {
    max-width: 400px;
    margin: auto;
    border: 4px solid #256bdb;
}

div.ex3 {
    min-width: 400px;
    margin: auto;
    border: 4px solid #256bdb;
}

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

CSS width: useful tips

  • There are two experimental values for the CSS width property: you can include border-box or content-box to make the width defined in length units or percentages apply to a specified box of the element.
  • Always make sure to check the way your element behaves when you manipulate the text size by zooming in or out.

Browser support

Browser image
Chrome
1+
Browser image
Edge
12+
Browser image
Firefox
1+
Browser image
IE
4+
Browser image
Opera
3.5+
Browser image
Safari
1+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
10.1+
Browser image
Safari
1+