How to write media queries in CSS

Поделиться
HTML-код
  • Опубликовано: 23 дек 2024

Комментарии •

  • @sushantbajracharya5516
    @sushantbajracharya5516 4 года назад +2

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

  • @thesmartest1919
    @thesmartest1919 4 года назад +4

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

  • @mind_of_a_darkhorse
    @mind_of_a_darkhorse 4 года назад +4

    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.

  • @GarmrZero13
    @GarmrZero13 4 года назад +7

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

  • @yahayaoyinkansola8258
    @yahayaoyinkansola8258 Месяц назад

    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.

  • @colindante5164
    @colindante5164 3 года назад +1

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

  • @husseinkizz
    @husseinkizz 3 года назад

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

  • @whitebear224
    @whitebear224 3 года назад +2

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

  • @crismonteiro838
    @crismonteiro838 3 года назад

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

  • @GabrielKakeKake
    @GabrielKakeKake 4 года назад +1

    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?

  • @muhammadsaeed3233
    @muhammadsaeed3233 4 года назад +1

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

  • @FaradayAcademy
    @FaradayAcademy 4 года назад +1

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

  • @pranavgoel29
    @pranavgoel29 4 года назад +1

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

  • @arturoordonez-hernandez8750
    @arturoordonez-hernandez8750 2 года назад

    I wish I would have seen this tutorial sooner.

  • @gregorythompson8873
    @gregorythompson8873 3 года назад

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

  • @tonimacb9647
    @tonimacb9647 2 года назад

    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....

  • @Oguztogrul
    @Oguztogrul 3 года назад

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

  • @dariomilani8382
    @dariomilani8382 3 года назад

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

  • @jubomdivnishvili8638
    @jubomdivnishvili8638 4 года назад

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

  • @martintomson8322
    @martintomson8322 4 года назад +1

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

  • @borisnefyod4868
    @borisnefyod4868 2 года назад

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

  • @rosaclovis
    @rosaclovis 4 года назад

    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
      @TheCoderCoder  4 года назад +2

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

  • @samirsamir7779
    @samirsamir7779 3 года назад

    definitly great your explanations ! thank you

  • @bF93712
    @bF93712 4 года назад +1

    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
      @TheCoderCoder  4 года назад +1

      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!

  • @remax110
    @remax110 4 года назад

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

  • @captaindesign
    @captaindesign 2 года назад

    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
      @TheCoderCoder  2 года назад +1

      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
      @captaindesign 2 года назад

      @@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 😅

  • @100XPercentX
    @100XPercentX 4 года назад

    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

  • @jacobashwinmathew3763
    @jacobashwinmathew3763 4 года назад +1

    Love from india ❤️ di

  • @JJ-wt4xv
    @JJ-wt4xv 4 года назад

    LOVE THIS!!!

  • @waqarali191
    @waqarali191 2 года назад

    why media queries effects the original design?

  • @najehmansouri1580
    @najehmansouri1580 4 года назад

    Can’t wait your reactjs video...

  • @iamdanyaal
    @iamdanyaal 3 года назад

    Thank You Ma'am

  • @mawkuri5496
    @mawkuri5496 3 года назад

    why this is better than indian tutorials in udemy

  • @shivanshpatel4072
    @shivanshpatel4072 4 года назад

    Wow Awesome 👍

  • @najehmansouri1580
    @najehmansouri1580 4 года назад

    Very helpful, thank you

  • @DavidTheITGuy.
    @DavidTheITGuy. 3 года назад

    Thanks alot dear

  • @rohil3023
    @rohil3023 4 года назад

    Great Video!

  • @jonasvanroy6641
    @jonasvanroy6641 4 года назад

    wie is hier door meneer vandersmissen?

  • @ketchemjunior5490
    @ketchemjunior5490 3 года назад

    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 😭😭😭😭

  • @sumanth8296
    @sumanth8296 4 года назад

    Mention that vs code theme please

    • @TheCoderCoder
      @TheCoderCoder  4 года назад

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

  • @favouritejome
    @favouritejome 4 года назад

    Nice one

  • @MrRetroVinyls
    @MrRetroVinyls 3 года назад

    black cursor ?!

  • @thespeaktv1221
    @thespeaktv1221 4 года назад

    Awesome

  • @amazighshawiagirl7416
    @amazighshawiagirl7416 3 года назад

    Great

  • @michaelhofby
    @michaelhofby 4 года назад

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

  • @thespeaktv1221
    @thespeaktv1221 4 года назад

    Love you Jessica

  • @israrahmed4228
    @israrahmed4228 4 года назад

    ❤️ from 🇵🇰

  • @rvasko8747
    @rvasko8747 3 года назад

    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...

  • @sumanth8296
    @sumanth8296 4 года назад

    Make videos on Gatsby jassica chan

  • @ketchemjunior5490
    @ketchemjunior5490 3 года назад

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