is there a resource (web site) that provides HTML and CSS with the min () max () and clamp() in the code so i can play around?
There’s a nice little video linked in this css tricks article that is worth watching.
1 Like
thanks!
i watched several times
i would LOVE to get my hands dirty and manipulate the code.
any suggestions? not a video, but full code
my struggles are understanding min() and max() (yes the video is a help there)
AND
knowing when to use min () and max() in my own projects
yes, you could say just use your own code… but i do not know which code to manipulate
how about this… i could code a very simple page. say 1 image and 1 paragraph and learn min() max() and clamp() by experimenting with that code
good idea?
It is good to start simple and then, when you feel comfortable, try to apply what you learnt to something a bit more complicated.
1 Like
Isn’t that how you learn every new property?
Just throw a few styles into a codepen and play around with the values.
Copy some of the examples you’ve seen and compare how they work
If you open dev tools you can slide the values up and down in real time to see the effect.
That’s the way I do it for anything new until I get a grasp on how it works. Code playgrounds are good but there’s nothing like getting your hands dirty and doing it yourself
There is no magic or easy way and it’s mainly practice and hard work.
2 Likes
Here’s another very good example with lots of animated examples to show how things change as the screen gets wider.
There’s a codepen linked in the demo that you can play around with and test what happens.
thanks for the help there!!
in min() isnt the same 1 of the 2 arguments always smaller?
and in max() the same 1 of the 2 arguments always larger?
this is an introductory, basic question
1 thing i do not get, yet,
“is If you want the element to always be at 50% width, and not exceed 75ch in width (i.e. on larger screens), write: width: min(75ch, 50%); . This essentially sets a “max” size by using the min() function.”
why am i getting a max size from a min() function?
again
By the same token, you can ensure a minimum size for legible text using the max() function. This would look like: width: max(45ch, 50%); . Here, the browser selects whichever is larger, 45ch or 50% , meaning the element must be at least 45ch or larger.
why am i getting a min size from a max() function?
i would think this an easy concept, but i am lost
the codepen, yes it stops at 400px, but gets super tiny as the screen gets smaller.
the highlight is interesting. as i shrink the viewport the highlight goes from 400px to 50%… and i can still shrink the code.
however, as i understand, thats moot. the code will stop at 50%
i tried reversing the arguments on both min() and max()
width: min(50vw, 400px);
width: max(400px, 50vw);
and tried keeping the first argument and second in the same place per function
… not sure what that’s doing for me
width: min(50vw, 400px);
width: max(50vw, 400px);
i assume i can have entirely different arguments per function
and i dont need a min() and max() together… i can only use one
is there a better choice?
what type of measurement is best?
i have spent a while thinking / coding this!!
Yes as explained in that last article.
This essentially sets a “max” size by using the
min()function.
Don’t mistake min for meaning anything other than choose the smallest value from the list. The same goes for max and it chooses the largest value.
The value you get will determine the width accordingly.
In the first the minimum values is chosen. In the second the max value is chosen.
Just put it in codepen and open and close the screen to see the differences.
1 Like
You can only use them if you nest them like this:
e.g.
small {
font-size: max(min(0.5vw, 0.5em), 1rem);
}
Usually though if you want a min value and a max value and a preferred size you would use clamp() instead.
As Paul said, min and max do nothing except pull the smallest or largest value from the list of available options. The order of the list doesnt matter; max(1,2,3) and max(3,2,1) are both 3.
So the key here is the logical statement.
If you want the element to always be at
50%width, and not exceed75chin width
So if you want it to be at most 50%, while still at most 75ch, think about what it means; if 50% is 100ch, you dont want to chose 50%, because then you will exceed 75ch, and fail the second condition. So you need the SMALLER of the two options; you know that if you choose the smaller one, it will also not break the other condition. (it cant be that 50% < 75ch (“It’s smaller”), and “the selected value” > 75ch at the same time, because you chose 50%.)
It’s a logical bridge that seems incorrect, but it’s true; to find your upper bound, you want the lowest value; to find the lower bound, you want the highest value.
2 Likes
thanks to you both!
i am grateful for the continued explanations… more clarification on these concepts
so i will study your advice here and play with my code
2 Likes
thanks, m_hutley
this where i am struggling
please do not reply, i really want to figure this out myself
i will study and play
i dont get ch but that is only a search away
i will handle it from here
if need be, i will be back!
Well, i’m going to reply anyway 
Try taking the numbers out of it.
You have two values, X and Y, that relate to the measurement of width.
You want to ensure that the actual measurement does not exceed X and it does not exceed Y. What is the largest you could make the actual measurement, if X < Y? What about if Y < X? (If they’re equal, then the answer is moot)
1 Like
thanks!
lets work with familiar measurements
ok… this i GET
i get confused with ch, vw and %
which units are best to use? depending on what i want to do? can everything be done with px?
please clarify
lol no there wouldn’t be any point if both items are in px.
When you say:
width: min(200px, 400px);
You are saying please take whatever measurement is smallest.
Obviously 200px is smaller than 400px so the 400px is superfluous and is pointless. You would just say width:200px (and vice versa for your other example).
The reason for using min() is when one or more values are a fluid unit.
e.g.
width: min(200px, 50%);
Now the 50% will change depending on the screen size. On a wide screen 50% may be equal to 1000px so the browser will choose the 200px value. However on a small screen of 320px 50% will only equal 160px and then the browser chooses the 50% value instead. It will choose whatever is the smallest value (and vice versa for max).
vw is a fluid unit so you can think of it as percent whereas as ch is a fixed unit (1 character).
The min() and max() properties allow you to say things like “this element should be 50% wide on big screens no matter how wide they are but I never want it smaller than 300px” i.e. width: max(300px, 50%);
1 Like
i get all of it up to here
i understand that max(300px, 50%); will place the higher value of the 2, depending which one is valid at a given time
is that correct?
are you describing something else in the above quote?
so sorry to ask again…
if
why is the max 300px and NOT min 300px
am i an idiot?
m_hutley may have addressed this…
i kindly ask for more clarification
Yes that’s correct.
You understood it above and now you have forgotten it
‘max’ means choose the largest value.
If 50% is larger than 300 px then 50% is chosen.
If 50% is less than 300px then 300px is chosen instead.
That means that the value that is chosen will be 300px or greater.
It’s basic logic.
Don’t confuse it with min-width or max-width.
I think the terms min and max are confusing you so think of them as ‘choose the smallest value’ or ‘choose the largest value’.
1 Like
i think i FINALLY got it!!
isn’t it great when you learn something new?
many thanks!
i will give you 0.000000000001% of my first million!
sound fair?
2 Likes
say i have min(200px, 50%)
what’s happening when the 200px is smaller and in dev tools i bring the screen size under 200px?