HTML width: max(100px, 18vw);

HI, anyone can explain to me why I shoud use this
width: max(100px, 18vw);
instead ,… max-width: 100px; or minumum 18vw?

it’s confusing me so much with this
width: max(100px, 18vw);
width: min(100px, 18vw);
font-size: min(5vw, 1.2em);

why is better to use those instead
width: 18px;
max-with: 100%;
min-width: 2rem;

can some body explain this, because right now I’m so confused.

Hello, rob.bob.50p,

Is this question in regards to a specific part of the Free Code Camp curriculum, or just a general question about using units in CSS?

Generally speaking, it’s a good idea to avoid fixed values such as width: 100px, because this tends to be not responsive. It is better to do something like max(100px, 18vw), because this is more flexible/responsive.

In relation to CSS’s max() in particular, see: max() - CSS: Cascading Style Sheets | MDN

Hi, thanks for the answer.
My question is regarding actually two things,
The first thing, I’m working now on quiz and in the course they’re started using ( font-size: min(5vw, 1.2em); ) for example, but before was only max or min width, which was easy, but now I understand that is better to use the modern units and styles within css and html because a thousands different screens and phones, … But it’s so confising that I can’t get this somehow why I have to place two units ( font-size: min(5vw, 1.2em); ) inside,
I understand that vw is better than px , I understand that still can use %,
but when I have ( font-size: min(5vw, 1.2em); or font-size: max(5vw, 1.2em); )
it’s confusing…
so far the course freecodecamp not explaining anything regarding this units, if I’m not digging on my own I don’t have some knowledge about it, …
I have no idea what will be later in the course, if I pass all css section, maybe then I will more calm. But now I’m still confused even when I read you’r link from Mozilla about it, …
Why is so confusing me ? Because I have to do a website for example, ok I can use & or rem or vw, no problem , but I can see how I can use this font-size: min(5vw, 1.2em);, I know what that means, I can copy and paste no proble with that, but still I can’t see than I want to use it,.
I know that I have to but I can’t see it now.

Please, tell if you have passed this all course and you know how to use the famous libraries like react, and tell me should I worry about it now or just pass the freeCodeCamp and with time I will have my answers if I reach the backend?

You should pass the JavaScript challenges first, then you need to learning about libraries and frameworks .

Yeah, I fallow the lane, no skipping, but as I said so far I’m confused about it that I have in my main post.

There is no confusion buddy. When someone learning a-z, they will learn a first not ask what is z. Just learn step by step , in future you will find all your answers.

Hi again,

I have used React but, as hasanzaib1389 says, go one step at a time. The Free Code Camp curriculum is good to do in order.

Any time you learn something knew you’re going to be in a kind of fog. If you don’t understand what you’re learning now, that’s ok. If you can look back a few lessons/days/weeks and feel like you understand what you learned before, then you’re making progress. It just takes time and practice and experimentation.

1 Like

yeha, I’ve got more relaxed now, and I’m doing lesson by lesson, and repeat some,… Because as I expecting to be confiussed,… But still that units is pain in a neck :smile:
I’m doing now tables, that css part it’s crazy too,… Anyway, thanks for answer.

and BTW, how’s react if you compare this courses html/css…?
Any conclusions ? advice ?

No worries :slight_smile:

Hang in there!

Personally, I really enjoy using React.