How to write media queries in CSS

[@mind_of_a_darkhorse]

One other reason I found out to use EM's in Media Queries is that different browsers handle REM's for screen sizes differently, especially Safari. EM's seem to be handled the same across the field of browsers. Just an FYI for those who are interested. So the gist is to use REMs for fonts, but EMs for Media Queries.

[@husseinkizz]

keep up the good work Jessica, I like your energy and charisma when on camera. really playful and free, keep up!

[@arturoordonez-hernandez8750]

I wish I would have seen this tutorial sooner.

[@GarmrZero13]

Never thought of using ems in media queries, thanks for the insight!

[@TheCoderCoder]

You're welcome!

[@rosaclovis]

I like this type of video a lot! Good to see you back here. Looking forward for some live coding using SCSS and some more hot tips. Go on girl!

[@TheCoderCoder]

Thanks! Yes, there will be a live coding in the near future :D

[@borisnefyod4868]

But why do you use EMs and not REMs for your breakpoints?

[@martintomson8322]

Thank you for the content! Do you concider using F# additionally?

[@TheCoderCoder]

I don't know F#, sorry!

[@mawkuri5496]

why this is better than indian tutorials in udemy

[@shivanshpatel4072]

Wow Awesome 👍

[@rohil3023]

Great Video!

[@TheCoderCoder]

Thank you!

[@jonasvanroy6641]

wie is hier door meneer vandersmissen?

[@michaelhofby]

Please upload new videos soon?? We are missing your face

[@ketchemjunior5490]

i seriously need help with applying media queries.. please anyone drop your Twitter handel and i will send you a photo of what i did i plese someone tell me where i went wrong... please 😭😭😭😭

[@israrahmed4228]

❤️ from 🇵🇰

[@thesmartest1919]

Thank you . I was procrastinating on learning media queries I had impression that it's complicated😅. Ur explanation made it clear👌🌷

[@tonimacb9647]

Hey.. hello. I have a question. I prefer to start on a desktop device to phone devices so, I code max-width:1200;,,,,, 1024,,,, 768,,,,, and the last one 480..... Leaving the main code out for bigger devices.... Is that right..?? Please help me out.. Great video by the way... I love them....

[@sushantbajracharya5516]

you are a very kind human for keeping an ad in the end.

[@GabrielKakeKake]

Hi! Please help meeeeeeee 🙏🏻 i've got this: h1 { font-size: 1.75em; @media (min-width: 43.75em) { font-size: color: yellow; } } The text changes color to yellow (meaning it is correctly linked) but the font-size does not change at all! I tried px, rem, em ... nothing works. Can anyone explain this?

[@rvasko8747]

This video comes at top of the search result but the info is hard to digest.. less talk more practical approach would've done the job...

[@muhammadsaeed3233]

Wow Great tutorial... Tbh its my first tutorial from female. 😍 Great works wishing more tutorials

[@colindante5164]

By far the best video explaining media queries and for this we are all very grateful. Thankyou))

[@whitebear224]

This was a great explanation! And the last part about ems and rems was really helpful!

[@ketchemjunior5490]

pleaseeeee... i just subcribed ro you chanell so u can help me... this thing is pissing me off real bad!!

[@FaradayAcademy]

This is great. I'm sharing it with our students.

[@waqarali191]

why media queries effects the original design?

[@bF93712]

Hi, another awesome video! TX for the tips! Also, I want to thank for the video on stacking context, that video helps me a lot of understanding z-index and positioning! I have a few questions regarding this video if you have the time to answer them: 1) There is any difference in using em vs rem on the min-widht on the media queries? I understand that ems for widths takes the "current elements computed font-size" as reference and rems takes always the "root computed font-size" but I'm confuse if there is any differences in the case of media queries ( me personally I always use rems on media queries min-width property ) 2) What do you think on the technique about using 62.5% for the font-size used time ago, to simulate a font-size of 10px and working with rem across the elements and taking that 10px = 1rem as a reference? Again: Thank you a lot for your videos, you are a great instructor!

[@TheCoderCoder]

Hi Bruno, thanks for watching! 1) For em vs rem, I'm not sure what the difference would be for media queries, but I've only seen people use em's, not rems. That doesn't mean it won't work with rems, but there might be a reason for that? 2) I've heard of people using that a lot, but I prefer to try to stick with using the browser default. It's a pain to convert, but I usually create a set of font sizes and save them as Sass variables. That way I can just pick the one I want to use each time. Hope this helps!

[@Oguztogrul]

What means flex: 1 0? I know, 75% and 25% are percent of size. What about 1 and 0?

[@jubomdivnishvili8638]

Hello, I just discovered your channel and I’m very lucky...... btw which theme are you using?

[@gregorythompson8873]

I am trying to find a CSS code to print a specific section in an elementor page. Do you have any ideas? Thank you

[@captaindesign]

I've been searching for the font you use in your code editor, but with no luck. Any chance you could share the name?

[@TheCoderCoder]

I don't remember what I used in this video, but I currently use "Consolas, 'Courier New', monospace" I think the default? I might have also been using Fira

[@captaindesign]

@@TheCoderCoder that's unfortunate, I really appreciate the reply though. I tried Consolas, Courier New, Fira, Operator Mono, Inconsolata, JetBrains Mono, and it's none of them. Oh well, maybe one day I'll find it 😅

[@jacobashwinmathew3763]

Love from india ❤️ di

[@pranavgoel29]

Really great explanation loving it and finally new videos are coming 😄

[@TheCoderCoder]

Thanks! Will keep trying :)

[@crismonteiro838]

Hey can someone explain me why we remove the media query in main and aside (11:27-11:37)

[@DavidTheITGuy.]

Thanks alot dear

[@100XPercentX]

Can you do a tutorial on how to place something on the right, two column layout? Like how websites typical have text on the left then some pic on the right

[@MrRetroVinyls]

black cursor ?!

[@iamdanyaal]

Thank You Ma'am

[@amazighshawiagirl7416]

Great

[@dariomilani8382]

thank you this was really clear and really helpul, I love your tutorials

[@samirsamir7779]

definitly great your explanations ! thank you

[@najehmansouri1580]

Can’t wait your reactjs video...

[@remax110]

I came across your channel and I like your content and teaching style. Thank you.

[@TheCoderCoder]

Thanks! I'm glad it can help you!

[@najehmansouri1580]

Very helpful, thank you

[@favouritejome]

Nice one

[@thespeaktv1221]

Love you Jessica

[@thespeaktv1221]

Awesome

[@JJ-wt4xv]

LOVE THIS!!!

[@sumanth8296]

Make videos on Gatsby jassica chan

[@TheCoderCoder]

sorry I don't know Gatsby 😂

[@sumanth8296]

Mention that vs code theme please

[@TheCoderCoder]

It's a custom one I'm working on, will post when it's complete!