Min max width.and what it's for

Community
1

So i usually just used width and height , i never used min- or max- (i didnt know what they were for ).and im following a course that i bought not so long ago and the guy uses
min max width. In this case he just used max with of 700 and width:80%; on the body
which confused me bcs i didnt understand what happened .the page didnt change .can someone please explain what it’s suposed to do bcs so far im not getting it :stuck_out_tongue:
border:20px solid #bdc3c7;
padding:20px;
max-width:700px;
width:80%;
margin:20px auto;
font-family: ‘Source Sans Pro’, sans-serif;

and this is the html he used it on

This Is My First Article

Bacon ipsum dolor amet brisket ground round strip steak meatloaf. Rump bacon chicken, beef ribs ball tip drumstick bresaola meatball pork belly shank. Rump meatball ribeye doner. Prosciutto bacon porchetta tenderloin beef. Swine picanha short ribs cow doner kevin. Pork loin meatloaf corned beef, bacon hamburger filet mignon burgdoggen meatball pork tenderloin. 

Salami swine jerky, strip steak tri-tip turducken rump bresaola kevin bacon sausage tongue. Short loin tail tenderloin, ham turkey filet mignon ground round.
Pancetta t-bone rump, kevin alcatra boudin filet mignon ham. Turducken swine turkey filet mignon hamburger biltong tail picanha, pork chop jowl tri-tip short ribs
pastrami prosciutto kielbasa.

Meatloaf spare ribs kielbasa salami beef. Jowl pork loin andouille jerky, shankle tri-tip kevin sausage bacon. Prosciutto shankle filet mignon t-bone chuck.
T-bone leberkas bacon corned beef swine picanha strip steak tenderloin. Ribeye shank bacon kielbasa, tongue rump cow pork belly venison.</p>
2

some webpages do have a max-width of 1000px-1200px, so that if you put it on a large screen (or even tv screen, which can be more then 2000px wide) the page doesn’t stretch itself to wide

so the page can stretch, till a certain point. quit usefl.

1 Like
3

oh so its a way to prevent the page from getting messed up on bigger screens

4

2314×868 12.2 KB

as i show in this example, see how it centered? this is the css code i used:

div {
  height: 600px;
  width: 100%;
  max-width: 1200px;
  background: aqua;
  margin: 0 auto;
}

without the max width, the element would be the width of the entire page. (if this where an actual webpage design, this might have made some element disproportionally big, ruining the design of your page)

1 Like
5

thank you very much :smiley: