Min/max-width/height on text elements vs just font size

Question

How can a range help on a text element if we have font-size?

Answer

It is not so much about it helping the size of the text, but the space it exists in.
A min and/or max value for width and/or height on text elements like an h1 or a p will provide the space restrictions for that text element to exist in the container, that way it oversees that either it is not going to be too small, or that it will not go over the space it should be contained in. The issue this may face is overflowing text if you have not assigned a font size in the case of an h# tag which has a default font-size of 2% of the window size. That is also why min-width, max-width, min-height, and max-height are more commonly implemented on img elements rather than text.

12 Likes

“After you’ve done this successfully, resize the browser and notice how the paragraph’s box will no longer shrink below 200 pixels.”- This is not working, both in in the firefox browser and the inbuilt browser. Am I doing something wrong?

We will need a link to the exercise, any error message you are getting, and a sample of your code. Please post these in a reply.

2 Likes

I have the same issue as the person above. I don’t see any effect in step 4 (setting max-height of the paragraph) of this exercise:

https://www.codecademy.com/courses/learn-css/lessons/box-model-intro/exercises/min-max-height-width

2 Likes

It may not be readily apparent until the page is loaded into a browser. If you can, create the page on your machine. Keep the image URLs so the images can be downloaded from the CDN.

Once you have the page saved, open it in a browser and shrink the width, then scroll up an down and look for any differences.

5 Likes

Yes, thank you. I see now that it does indeed work. But it is obvious only between the 3rd and 4th paragraph and only when the browser window is narrow. You can’t really see it in a full-width viewport. So, the example is not very illustrative and should perhaps be revised.

Before:

After:

3 Likes

In the exercice 2 of the 12th page of the Box model why when we set the max width of the p element the paragraphs are no longer auto centered on the page ?

Elements in the page inherit text-align: center from #main. There is no center alignment with margin: 0 auto, only center alignment within the confines of its maximum width. The P’s will look like they are left aligned but if we look closely they still have the text-alignment inherited from main.

how do you know what size to set the min and max widths and heights?

In a responsive layout it depends upon the dimensions of the device in use (the client). We tailor our layouts to each device using CSS Media Queries.

There are two aspects to bear in mind,

  • device width
  • element width

For larger displays we might have two or more columns depending upon how our page is constrained. Some columns may have fixed widths, while one or more may have flexible width, given the device width to fill in. When columns get too wide to be easily readable, we can stipulate a max-width for that column so textual content is easy to read.

Bottom line, the values we choose will stem from all our own considerations derived from the chosen layout. It’s our design that dictates, accessibility and usability notwithstanding.