Width: Minimum & Maximum

Although relative measurements provide consistent layouts across devices of different screen sizes, elements on a website can lose their integrity when they become too small or large. You can limit how wide an element becomes with the following properties:

1. min-width — ensures a minimum width for an element.

2. max-width — ensures a maximum width for an element.

In the example above, when the browser is resized, the width of paragraph elements will not fall below 300 pixels, nor will their width exceed 600 pixels.

When a browser window is narrowed or widened, text can become either very compressed or very spread out, making it difficult to read. These two properties ensure that content is legible by limiting the minimum and maximum widths.

Note: The unit of pixels is used to ensure hard limits on the dimensions of the element(s).

Instructions

1.Resize the browser to the right. Notice that the text on the web page can become difficult to read. Let’s limit the text’s width to keep it legible.In style.css, create a CSS rule that sets the minimum width of all paragraphs to 200 pixels and run your code.

Now, resize your browser (make it narrower) and notice that the text no longer compresses as much as it did before.