CSS Media Queries for Beginners: Breakpoints, Max-Width, Min-Width, and More

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

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

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

    Read your article! I never knew about putting media queries at end of css. Thanks! I learned so much! No wonder it wasn't working.

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

    You make the best videos on CSS. Thank you : )

  • @chrisboden9820
    @chrisboden9820 2 года назад +2

    Thank you so much for this. Such a clear and simple explanation. Exactly what I needed. I just now need to research if you can do multiple media queries in one line for example, when it's -landscape orientation with a min-width- it does this.

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

    I've watched quite a few media queries videos and this is my favourite so far. Thank you so much.

  • @liliabekuzinaensosense8580
    @liliabekuzinaensosense8580 3 года назад +3

    Thank you! You are a genius of explaining in the way that even beginners can understand! 🙏🏻

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

      you're welcome! I'm glad that my video helped you :)

  • @traoresambaabdel1856
    @traoresambaabdel1856 4 года назад +14

    i've just been able to submit my final after watching this.

  • @stealthbusiness
    @stealthbusiness 2 года назад +2

    Thank you for all your tutorials. So helpful. I am in learning mode, so I hoping you would be willing to let us know the following. I believe this is a Media Query question. I have 4 different full screen videos one for each breakpoint. How do add each one to the assigned breakpoint?

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

    just subscribed. Media querry made easy for me thanks from Russia

  • @Flonfl0n
    @Flonfl0n 2 года назад +1

    What about mobile devices that are 1920x1080px ? it won't work, will it?

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

    you explained slowly and clearly. So helpful ... thx

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

    Thank you. Just learned something new about @media queries.

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

    thank you very much sir your video is very helful......i wish brightness your future

  • @renejacques8288
    @renejacques8288 7 месяцев назад

    I'm on a mac using Chrome and @media screen and(max-width: 480px) doesn't work for me. @media (max-aspect-ratio: 16/9) responds, but I don't fully understand it yet.

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

    Thank you for simple explanations.. 👏👏

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

    Can you please save my sanity and let me know, how I use a media query for the iphone 8 and the iphone X when they both have the same width of 375px?

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

    orientation:portrait w is smaller then h, orientation:landscape then (w is bigger then height ). I Love this. media query always bottom otherwise, problem developer face problem.

  • @posguy13
    @posguy13 Год назад

    Clear and concise. Thanks!

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

    Thank you for this. I understood it perfectly

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

    I'm trying to make my website mobile-compatible, everything overlaps when the phone is turned horizontally. what do you suggest.
    The codes I wrote for the phone are @media only screen and (min-width: 150px) and (max-width: 600px) {}
    my other media codes
    @media only screen and (min-width: 600px) and (max-width: 800px) {}
    @media only screen and (min-width: 800px) and (max-width: 1024px) {}
    There is a problem in the horizontal

    • @JorgeRivera-rp1zw
      @JorgeRivera-rp1zw 3 года назад

      My dear friend I have the same trouble.
      I did a web page with pure code Html. CSS, and a few JS, but have a trouble in place the @media queries..please help us

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

    Thanks, your explanation helped me a lot.

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

    Great content Cem :) LG aus Dortmund :)

    • @cemeygimedia
      @cemeygimedia  2 года назад +1

      Thank you and congratulations for your successful channel! If you visit Dusseldorf some day, please let me know :)

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

      @@cemeygimedia thanks 😊 Cem. Sure I will ping you when I visit Düsseldorf again 🥰

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

      @@cemeygimedia by the way: I just read your few articles on Medium. You’re a great writer too. You have really awesome writing skills. :)

    • @cemeygimedia
      @cemeygimedia  2 года назад +1

      sure, anytime! I always wish to meet other RUclipsrs and even maybe bring them together. So we can build a community of RUclipsrs who lives close to each other. I will soon connect you on insta as well :)

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

      @@cemeygimedia thanks 🙏 Cem. Really nice to hear that 🥰🥰

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

    Great video , I easily learnt from it 👍🏻

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

    Thank you, very helpful.

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

    Eline sağlık. Yeni öğreniyorum ve tek başıma zorlandığım yerler oluyor. Zar zor yaptığım sitenin telefonda iç içe geçtiğini görünce buraya kadar geldim :D

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

      Tesekkürler, zamanla ögrenirsin :)

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

    any media query for height? for any particular device. e.g. 1280 X 1024 or 1280 X 960. only for height

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

    How did you open the developer tools???????????? 🤦🏽‍♂️

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

    bravo, super aciklayici video!

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

    Thanks a lot. Useful and clear stuff. Cheers!!

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

    sir how many media query to use to make a fully responsive

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

      You mean fluid? Set relative units like % for width. (example: width=100%)

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

    çok teşekkürler, çok anlaşılır bir video

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

    Really helpfull and easy to understand

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

    so i did exactly what you said but mine is not responding. at 1200px, i made a breakpoint to float a text, but for some reason its not executing like yours. I even tried to change the background/font size to see if it would work, and nothing.

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

      Ever figure this out? Having the same issue

  • @888glory9
    @888glory9 2 года назад

    Thank you man👊🏽❤️

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

    My website is not responding to ANY media queries on ANY min/max pixels. What is going on? I have my folder structure correct. Perhaps I'm missing a specific html meta tag?

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

      Did you include this tag in the section of your code?: **

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

      @@cemeygimedia Yes, I had that. Thank you for the response. So, I had made a separate css file called queries.css, and put it in the same folder my main css was in, but somehow wasn't linked to my overall project. I am now doing the queries inside my main css file and it works fine. Weird.

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

    You Open My problem
    You Legendary 😍😍😘

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

    Great explanation! Thanks man!

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

    Very nice.........

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

    Helpful video, thanks.

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

    Thanks a lot for the explanation!

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

    thank you so much.really helping

  • @lambo-ca
    @lambo-ca 3 года назад

    I know what is the difference but always come back to RUclips to watch again.

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

    After a year watch manny video I got from your video

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

    thank you for this video! was very useful !!!

  • @braham.prakash
    @braham.prakash 4 года назад

    very nicely explained 👍👍

  • @riaddjaid7428
    @riaddjaid7428 2 года назад +1

    can we use multiple media queries for example
    @media (max-width:1300px)and (min-width:1000px){}
    @media(max-width:999px) and (min-width:400px){}

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

    simple and great video. thanks!

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

    But it not respond in my chrome browser

  • @book2nez500
    @book2nez500 Год назад

    Thank you so much

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

    @media scree and(){} syntax trying not working. but @media(){} syntax is working lovely!

  • @a.s6074
    @a.s6074 4 года назад

    great job, thank you !

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

    Thank You Sir

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

    Wonderful

  • @drakeo7594
    @drakeo7594 10 месяцев назад

    as soon as he said "toogle" to 3:18 I decided to try and find another video lol

  • @FelixOkolie_thenewsblogger
    @FelixOkolie_thenewsblogger 5 месяцев назад

    🎉🎉🎉

  • @SAmir-wp5zj
    @SAmir-wp5zj 4 года назад

    Veryyy good video...

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

    ❤️

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

    👏🏻

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

    Yuppie

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

    Türkçe alt yazı olsa keşke ..

  • @makcimenuka7904
    @makcimenuka7904 Год назад

    Good explanation thank u.