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.
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?
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....
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!
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!
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
@@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 😅
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
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 😭😭😭😭
you are a very kind human for keeping an ad in the end.
Thank you . I was procrastinating on learning media queries I had impression that it's complicated😅. Ur explanation made it clear👌🌷
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.
Never thought of using ems in media queries, thanks for the insight!
You're welcome!
Thank you for this video, I watched it to understand why people use em for their media query values, and not pixels, this video has clearified that.
By far the best video explaining media queries and for this we are all very grateful. Thankyou))
keep up the good work Jessica, I like your energy and charisma when on camera. really playful and free, keep up!
This was a great explanation! And the last part about ems and rems was really helpful!
Hey can someone explain me why we remove the media query in main and aside (11:27-11:37)
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?
Wow Great tutorial... Tbh its my first tutorial from female. 😍
Great works wishing more tutorials
This is great. I'm sharing it with our students.
Really great explanation loving it and finally new videos are coming 😄
Thanks! Will keep trying :)
I wish I would have seen this tutorial sooner.
I am trying to find a CSS code to print a specific section in an elementor page. Do you have any ideas? Thank you
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....
What means flex: 1 0?
I know, 75% and 25% are percent of size. What about 1 and 0?
thank you this was really clear and really helpul, I love your tutorials
Hello, I just discovered your channel and I’m very lucky...... btw which theme are you using?
Thank you for the content! Do you concider using F# additionally?
I don't know F#, sorry!
But why do you use EMs and not REMs for your breakpoints?
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!
Thanks! Yes, there will be a live coding in the near future :D
definitly great your explanations ! thank you
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!
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!
I came across your channel and I like your content and teaching style. Thank you.
Thanks! I'm glad it can help you!
I've been searching for the font you use in your code editor, but with no luck. Any chance you could share the name?
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
@@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 😅
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
Love from india ❤️ di
LOVE THIS!!!
why media queries effects the original design?
Can’t wait your reactjs video...
Thank You Ma'am
why this is better than indian tutorials in udemy
Wow Awesome 👍
Very helpful, thank you
Thanks alot dear
Great Video!
Thank you!
wie is hier door meneer vandersmissen?
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 😭😭😭😭
Mention that vs code theme please
It's a custom one I'm working on, will post when it's complete!
Nice one
black cursor ?!
Awesome
Great
Please upload new videos soon?? We are missing your face
Love you Jessica
❤️ from 🇵🇰
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...
Make videos on Gatsby jassica chan
sorry I don't know Gatsby 😂
pleaseeeee... i just subcribed ro you chanell so u can help me... this thing is pissing me off real bad!!