CSS min-width, max-width, and width

This tutorial explains the differences between the min-width, max-width, width, min-height, max-height, and height properties in CSS.
Code GIST: gist.github.co...

[@sharhanalhassan7352]

Are you kidding me??? Just 2 minutes into the video and I understand why I've been struggling to eliminate unnecessary horizontal scroll bars. It took me almost a whole day searching for how to solve it and you just did it in the first two minutes. Thanks, man. Subscription is done!! What else can I do for you??

[@SteveGriffith-Prof3ssorSt3v3]

Please share my videos to help others. :) Thanks.

[@peterngacha]

@@SteveGriffith-Prof3ssorSt3v3 truly sir you helped me alot. I too will share

[@ck0024]

*Now, I got it after 2 years of working without knowing it properly.*

[@SteveGriffith-Prof3ssorSt3v3]

Glad I could help

[@BobbyBundlez]

ok phew im not the only one, this shit is suoer hard to grasp ive been coding a full years lMFAO

[@niwanthakaweragoda9480]

Great Explanation!
Really helped!
Your voice is super clear too. I'm sure no one got confused about these things after watching this masterclass of an explanation.

[@rockon7478]

got it after 6 months of working without knowing it properly.Sir you're a Wizard!!

[@Anonymous-ht2bp]

Clear explanation,
and got my doubts regarding widths cleared with a simple 5 min video 🎉

[@miguelkalombo5512]

Hey there. Brilliant video, and easy, clear explanation.
THANK YOU!

[@rohil3023]

Thank you. you explained it better than any other youtube channel

[@Cassandra81552]

The best video explanation that I've ever seen, thanks a lot!

[@Teeffein]

Thank you so much brother for such an excellent explanations!

[@SaveSoilOraganically]

This tut made clear my doubts on max and min-width properties, good explanation.

[@obinnaukoofe8626]

Came back for a refresher!😁

[@rinviventura5891]

Thank you very much for this tutorial! I finally understood why my divs does not scale down in screen size.

[@parikshitmusic510]

Just great ,beautiful explanation

[@senseitei]

Thank you, mate! Finally got how it works:)!
Looking forward for more tutorials!

[@azamataslidinov5513]

Thank youu this solved so much of my problems

[@reneyoo6111]

First time i understood max width thank you :)

[@ilaanisdead]

Thanx for the detailed video

[@vaidasmasys3764]

Great stuff. Now few things in my projects makes a lot more sense :)

[@mochammadivanrais8485]

explain is clearly and easy to understand, thank you very much

[@muhammadibrahimkhan4355]

thanks brother . Much appreciated

[@toka8909]

Thanks a lot for this video.

[@Z3R0_U]

thank you very much you have a new subscriber

[@artursurman7805]

Great video Steve, straight to the point. Like!

[@mrx-qi8th]

nice man u explained it in the best possible way. just subscribed also.god bless u

[@nvmffs]

So what's the most common use for those?

[@SteveGriffith-Prof3ssorSt3v3]

Media queries to define ranges where you want to change various css properties

[@mazmk]

Finally i got it, thanks good sir

[@hesamft]

Thank you so much for this awesome tutorial

[@damo190]

I saw from MDN, "max-width overrides width, but min-width overrides max-width. "
But I saw this statement is always not true. I checked, when both min-width and max-width are mentioned,
When max-width value is less than width value, then only max-width overrides width.
When max-width value is less than min-width value, then only min-width overrides max-width.
So, I am confused.

[@SteveGriffith-Prof3ssorSt3v3]

I have never used both max and min in the same style. I will use a width plus a max-width OR a width plus a min-width.
In the rare cases where you want provide all three - a default, a max value, and a min value - then use the CSS clamp( ) method. ruclips.net/video/I0VU2Z_Y2KE/видео.html
ruclips.net/video/6QwMvf1Jq0M/видео.html

[@atultiwaree6023]

nice way of teaching sir!

[@nasa600]

Thank you very much

[@stranger4o4]

thank you sir,
this was very helpful.

[@ronishlopchan2020]

Thanks a lot!

[@rafhaellowixhomwad]

Thank you💚

[@whytepencil3672]

Absolutely amazing! Thanks!

[@d-landjs]

Amazing tutorial!

[@shivarammuthukumaraswamy7164]

Thank you for this wonderful tutorial

[@loveparmar1284]

thank you so much Sir.. concept cleared..

[@piotrekjazz1287]

No info about what is a most often use case, block elements adjust width automatically

[@SteveGriffith-Prof3ssorSt3v3]

There is no most often use case.
Yes, block elements adjust width automatically, these properties allow you to limit that process.

[@piotrekjazz1287]

@@SteveGriffith-Prof3ssorSt3v3 Thanks for response, the biggest use cases I know is max-width for elements you don't want to be to big, and min-height when you dont want your footer in the middle of the screen but at the bottom. Cheers

[@boatmanbm]

Waw, why didnt i learn this long ago.... im a nextjs dev currently building a chat system and this has answered all my questions. Thank u😊
Is it ok to always use max-width? Im thinking of doing that now

[@SteveGriffith-Prof3ssorSt3v3]

There are times you don't need it. It's a very useful property though.

[@Tony.Nguyen137]

Flex-basis and max-width is same right?

[@SteveGriffith-Prof3ssorSt3v3]

Not really. Max width is a limitation. Flex basis is a starting point, a default value.

[@lycan2494]

lol after like a year i finally understand max-min. this video is perfectly explained.

[@Omar-vz9el]

Great explanation!

[@tammyho2758]

you are the bob ross of web development!

[@abvgd1100]

Thank you very much!

[@corbettknoff5123]

Great Videos!

[@cap.blue-97sama99]

Thanks a lot man!

[@bskupdates1406]

can you give real use case example

[@SteveGriffith-Prof3ssorSt3v3]

min and max width create bounds for your width. You can use them throughout your page for whatever you want. I use max-width on images and other media elements all the time.
See here for more - ruclips.net/video/6QwMvf1Jq0M/видео.html

[@abdullahbinabbas1706]

thank you so much :)

[@JominJose]

got it! thanks :)

[@codedummydev]

my man has literally all the browsers, wtf lol

[@zerosandones7547]

CONCISE!

[@hashirattiyedath]

thankz Brow

[@fernandoarce804]

Great tuto (Y)

[@daverattu8990]

Thank youu!

[@yuriikilyk8923]

thank you)

[@webb-developer]

check☑

[@asadbekasqaraliev]

20200 year covid-19

[@renejacques8288]

Blurry screen

[@SteveGriffith-Prof3ssorSt3v3]

Just SD resolution because the video was recorded years ago.

[@renejacques8288]

@@SteveGriffith-Prof3ssorSt3v3 Not sure I know what SD means.

[@SteveGriffith-Prof3ssorSt3v3]

@@renejacques8288 standard definition, as opposed to HD or UHD or 4k

[@justspartak]

Thank you very much