This changed how I use media queries

Looking to step up your CSS Game? I have free and premium courses 👉 kevinpowell.co/courses?...
🔗 Links
✅ My video where no media or container query is used: • Use this instead of me...
✅ Code from this video: codepen.io/kevinpowell/pen/wv...
⌚ Timestamps
00:00 - Introduction
00:45 - How I found out about this
01:10 - Using calc in a media query
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@quizmastergary]

Love exploring your content. I was today years old when I realised your intro is “Hello my front-end friends” and not “hello my friend and friends” as my brain chose to mishear it. 😂

[@Thor6398-jt4mb]

I realized that a month or two ago, when he did a logo for front-end friends. Mind-blowing stuff.

[@philwatts]

Same! 😄

[@NamVu-im2xm]

Same 😂

[@peterpan47511]

Same!

[@yousefwaleed3955]

Wait .. does he say front-end and not friend 😐

[@alexpanteli3651]

This is awesome. Please post more tricks like this

[@DebopriyoBasu]

Wow! I think I know CSS and now I see I don’t know it well enough. Thanks! A lot to discover!

[@VeitLehmann]

Nice, I also didn't know that this was possible. However, it breaks one major benefit of your original approach: You can't use custom properties in the definition of container queries or media queries, so you have to hard-code the column count and column width.

[@KevinPowell]

Yeah, waiting for the day when custom media queries actually gain support! They are in the spec, afterall

[@muisadinam9615]

@veitLehmann, that's actually what I asked myself watching to the end of the video. Thx for the comment. That makes the solution less perfect than I initially thought :/

[@lyon-dev]

You're awesome Kevin! Thank you for the video! 😊

[@RobertMcGovernTarasis]

Thank you to your both, you have both helped me learn today

[@ElectricKota]

WOW 👏👏 thank you, this is best discovery I completly missed

[@igordasunddas3377]

I love this. While media- and container-less design is nice, I really appreciate this kind of approach, because thats CSS how I know it. Never knew one could use calc for the breakpoint value. I wonder if one can use variables in there, too....

[@KevinPowell]

Sadly, no 😞. Custom media queries are in the spec, but so far, no one has implemented them

[@easysolutions8628]

Thanks for the video Sir❤

[@BlackxesWasTaken]

Every single time I think "Ohh yeah I actually have good knowledge of css" BOOM you upload something and increase it :D nice one!

[@yahayaoyinkansola8258]

This is really cool to know, didn't know CSS has evolved this much

[@utkarshchaturvedi7948]

Nice concept

[@clamhammer2463]

You can use this together with clamp to make some cool stuff too

[@farhan-app]

No joke. I was thinking about this yesterday. WHAT.

[@gio2156]

Awesome approach, definitely gonna try it and test it out; i think this enables using media breakpoints as css variables; if it is so - it's mindblowing - currently i postcss for this

[@KevinPowell]

Sadly we still can't use variables in there....

[@einatblackrose]

Same here. I think people working on small to medium size websites should familiarize themselves with postcss, it really is a great and easy solution for those who don't want to dig into sass / less etc.

[@gio2156]

@@einatblackrose Agree, actually i think postcss is really powerful when using along with sass (sass compies scss to css and then postcss comes in play), thus you can use features of both sass and postcss, which is really neat; i have been using them together for like 6-7 months without a problem

[@einatblackrose]

@@gio2156 That's interesting, I never thought of using them together. What can postcss add in addition to the capabilities of sass?

[@itxpphere]

Thnx 👍👍

[@jamjam3448]

Thanks 🎉

[@tomaz-laurensoft]

\o/ Kevin CSS Things nobody can miss that 😂😊😊

[@einatblackrose]

Thank you and Miriam for this. Have you tried it with postcss yet? I wonder if this would allow to use it with variables.

[@not_amanullah]

thanks ❤

[@MAW__]

Escaping maths, once again 😂❤ Thanks for the tip! So cool

[@TheItamarp]

Really cool approach. Can you use a variable for column count in the media query calc?

[@KevinPowell]

Sadly no 😞

[@rorymax]

No but with something like SASS you could create them in a loop!

[@jennifershen4273]

Awesome!

[@sampathbasnayake7149]

Thanks Kevin Could you please advise how I could center the last item if I use a grid.

[@loathesome_pilk_drinker]

Haha, this is awesome!

[@francoisguezengar6255]

Cool to know it's possible. What's the difference with repeat(auto-fill/auto-fit, minmax(200px, 1fr)) in this case ?

[@FarazFKhan]

Can you have a font always take up the full width of a responsive parent div?

[@KevinPowell]

Without JS, not that I know of

[@vac1e]

May somebody help me out from which video does the first solution comes from?

[@Jarrod0067]

now all we're waiting on is using custom :root properties as conditions

[@justkailash]

BTW how much safe is to use Container query? or still should we use media-query?

[@RandomGeometryDashStuff]

03:57 which font @media queries use for ch and ex units?

[@KevinPowell]

If it's a media query, it'll use the default font + size in the browser. If it's a container query, it uses that containers font and size

[@tymiller2596]

What is the "ch" in the @container query? In other words what does 30ch stand for?

[@einatblackrose]

ch = character, essentially a single letter of your text

[@tymiller2596]

@@einatblackrose thank you so much man.

[@ormuriauga]

specifically, 1ch is the width of the glyph '0' in the used font, like 1ex is the height of the glyph 'x'. I think this is taken from the current font-size for all values except if you use them in specifying font-size, which will instead evaluate it in terms of the parent font-size just like when you use "em" (of course, what else could it mean?)

[@clevermissfox]

Will it be possible to use custom properties within queries ? EG @container (width > var(-col-size)){…}

[@KevinPowell]

We'll *eventually* have custom media queries... it's in the spec: www.w3.org/TR/mediaqueries-5/#custom-mq - when it will happen, I don't know :( - I also don't know if we'll be able to do it like you put, but I hope we'll be able to do something like that.

[@VeitLehmann]

@@KevinPowell I can't wait! That's a major missing piece, and I didn't know they are working on something like this.

[@theophiled]

Would be great if css variable where working inside of media/container queries, they could inherit from :root ..

[@ormuriauga]

In my opinion, without thinking it all the way through, I'd like it to evaluate variables in the context of the specific container that is being tested.

[@henrijohansson2482]

I tried to use variables ones inside media query and it totally failed. I think that would be really useful. I wonder if it will work inside the calc()

[@kotlapallihemanth1629]

How to make the border width with respect to size of element (either width or height of element) and also font-size with respect to size of element in which it is present

[@Linuxdirk]

I should totally dig deeper here. Never used grid before, though. Only flexbox.

[@KevinPowell]

You could use this for flexbox stuff too! I just used this for a quick example :) But, I'd also say to definitely dive into grid! You won't regret it!

[@mikeysd]

@@KevinPowell Absolutely. I held off on learning grid for a few years. Wish I hadn't.

[@einatblackrose]

It took me a while to really dig into grid, and honestly I'm still more comfortable with flexbox, but grid opens a world of new options for advanced layout, and often times just saves on some code writing (such as less divs) which is cool, you should give it a try.

[@georgesaunders3532]

​@@mikeysd grid is so powerful for templating pages quickly, and to be able to change the format of them quickly. Was a game changer when I learnt how to use it

[@hellohell143]

please talk about devin a first ai software engineer what is your perspective

[@deatho0ne587]

Doing the math for the gap and verry much short hand .class --c: 3; --w: 20ch; --g: 1rem; --m-w: calc(var(--w) * var(--c) + var(--g) * (var(--c) - 1)) @media/@container (width > var(--m-w))

[@DannyHobo]

you can't use variables in the media query

[@deatho0ne587]

That means I am not the biggest fan of it, since it is not as modular.

[@imralav]

Couldn't "repeat(auto-fill, ...)" be used here instead?

[@thebeginner613]

Hi, I have a doubt that, I am mern stack developer and a beginner from india. Using tailwind is better than css or not..? If concentrate more on tailwind, will it help more to get a job...?

[@RaphaelGolin]

I know you are exploring, and I like that, but I feel that overall we are now making webpages as if they were accessed in a accordion, that is constantly changing width while browsing 😅

[@omkargarde5867]

Every time i make my portfolio website you drop new a new way to make layout vedio, but can you make a vedio on how to select color scheme and font vedio please?

[@KevinPowell]

When you say select, do you mean come up with a color scheme and pick fonts? I've covered both :D - kzbin.info/www/bejne/o6KbfYyga9CFr6c and kzbin.info/www/bejne/sIawcp2AbZ2BgJI

[@omkargarde5867]

@@KevinPowell yes, I did thanks

[@REDISCOVERTHEWORLD]

please make one more projects of full responsive website i have just started your course to develop full website responsive but that’s very old please make more videos i want learn all the possible ways to make responsive website quickly and very smooth. I’m stuck and only you can help me

[@KevinPowell]

That course is older, but what it teaches is timeless as so much of it is about taking the right mindset into how to do things. I have a few more recent videos with larger builds too

[@REDISCOVERTHEWORLD]

@@KevinPowell Thanks Kevin glad you replied,yes i agree though that course is old but its worth watching,i am very fascinated watching your videos.I must say your the "CSS EXPERT GURU"

[@keithprice3369]

Is the point if "* 3" so it's clearer that you're looking for 3 columns of 200px vs just having 600, where that's not obvious?

[@KevinPowell]

Yeah, the 600 is kind of magic numbery, whereas if you do it like this, it's more explicit. Same thing, if you're doing the math in your head, but also allows for other units and less thinking on our end 😅

[@mathew-sunny]

Why can't we use custom properties inside nth selectors

[@KevinPowell]

There are a few places we can't use them, sadly

[@einatblackrose]

Just curious to know how would you use them?

[@mathew-sunny]

@@KevinPowell 😐

[@PiplupPlus]

Include media library I rather use.

[@nomadshiba]

we need mixins

[@KevinPowell]

There's a proposal by Miriam Suzanne for them, so it's sort of in the works!

[@lenarnie2973]

I do not understand, try it in real project

[@raj080288]

what is the difference between a media and container query?

[@einatblackrose]

Kevin has some videos about it, I'd recommend you to look for them

[@SRG-Learn-Code]

How you dare to have a class named wrapper... #WWAD

[@KevinPowell]

What would Adam do? 😂

[@einatblackrose]

@@KevinPowell Let's be honest - he would call it wrapper...

[@LokiGodOfMischief.]

First

[@kinetic_pixels]

Kevin, The Wizard Mathematician....who dabbles in CSS for fun 😆