Content Width

Responsive web design is a collection of practices to ensure the flexibility and fluidity of web content. With that in mind, it’s essential that web content remains fluid within its container.

CSS breakpoints are points where website content responds according to the device width. This allows us to create varying column widths within our grid. On a large screen, a content block may cover a quarter of the screen, while on a small screen it may cover half the screen.

During the design phase, it’s important to not add a width value to content to achieve a specific aesthetic layout (such as a section header with associated intro text). Capping the width of content to a specific width value that is less than the containing width of its intended wrapper can result in unwanted or irregular whitespace.