Using CSS Media Queries To Create Responsive Web Layouts

If you like this channel and would like to support it i accept bitcoin donations to my wallet address:
1Fm3ZywfnioXjHpUbVppLvpzehvRq2vfQs
Featured Full Courses:
HTML/HTML5 from beginner to expert:
www.udemy.com/...
React JS - The Complete Guide (over 150 000 devs enrolled)
bit.ly/2oCrfH0
React JS Web Development - The Essentials Bootcamp
bit.ly/2oEK2S1
The Complete React Js & Redux Course - Build Modern Web Apps
bit.ly/2mWNebj
The Complete React Native + Hooks Course
bit.ly/2mofraC
React Native - The Practical Guide
bit.ly/2nTm98O
The Complete JavaScript Course 2019
bit.ly/2mjsbiB
Recommended VPS and dedicated servers for your hosting:
www.vultr.com/...
More Content:
Build native apps for iOS and android in the browser: interactiveapp...
How to use CSS Media Queries to create responsive web layouts.

[@bambubombon]

I thoroughly enjoyed this lesson, Johan.. it may seem simple to you.. but "media queries" is not an easy concept to explain to a beginner - I was unable to grasp it until I learned it here from you. So thank you very much.. you have a new fan! :-)

[@FullstackDevelopment]

Glad you liked it!

[@rasikaghatpande1893]

I was stuck with media queries and then I saw your video... Got all my doubts clear. Very Helpful video. Keep going

[@melmoreira7456]

Thanks for your support.
Blessings!!

[@FullstackDevelopment]

You are welcome!

[@trail000]

Hey man you are awesome and fantastic way of explanation about CSS media query ...I have seen many videos but I don't get what it is...by seeing your video u got the thing ...no one showed about how this page appear in tablet/mobile,but in this video you have explained how to see in tablet /mobile.Thanks you sooooooooooooooooooooo much..100% Best Teaching,Best Explanation...

[@sunildora1690]

thank you for this video. I understood completely about the topic. this video is very useful.

[@FullstackDevelopment]

You are welcome!

[@angelanorris546]

Thanks for the straight forward example/explanation. Appreciate it.

[@FullstackDevelopment]

Angela Norris thanks!

[@erickchavez4551]

Really well explained! Thanks. Could you make a video about making a simple slider?

[@josemunguia5660]

Thanks for sharing the knowledge! Great content and easy to follow

[@FullstackDevelopment]

Thanks!

[@yourfriend547]

Thank you for that clear explanation. It has been very helpful :)

[@FullstackDevelopment]

You are welcome

[@BlackSunComics]

Great tutorial. Everything was explained so clearly. Thanks for posting.

[@FullstackDevelopment]

Thanks!

[@naitikkathiriya]

So basic and the tutorial also basical teaching way, it's make us belive that this type of methods are east to learn though we take it as hard..
Thank u✨

[@FullstackDevelopment]

You are welcome!

[@AdnanAbbasi_LXXVIII]

Excellent tutorial, very straightforward to follow, could you please do a tutorial on how a div can be changed into an accordion when I change the screen size to mobile view, thanks very much!

[@FullstackDevelopment]

I might do something like this in the future.

[@AdnanAbbasi_LXXVIII]

Fullstack Development thanks very much for your reply, but I was able to achieve it with putting in different dimensions in the media query, very useful feature

[@GJames021]

I appreciate you bro thank you so much 🙏🏾

[@FullstackDevelopment]

You are welcome!

[@GJames021]

@Leonidas Xander thanks!

[@rehanabbas5525]

You should have given code link. I need this code. Tutorial is good btw

[@wamoka9381]

This is very awesome. It has helped me personally. Many Thanks

[@FullstackDevelopment]

Thanks alot!

[@chansfor]

Terrific tutorial, many thanks.

[@FullstackDevelopment]

You are welcome!

[@lazolabucwa8821]

You're a blessing. Thank you!

[@FullstackDevelopment]

lazola bucwa Thank you i appreciate it!

[@BrSalomon]

Very nice, thanx!

[@FullstackDevelopment]

Thank you

[@samuelayeni2426]

Very helpful. Thank you so much

[@johnjones764]

Very easy to understand. You have done an excellent job. Thank you. I have subscribe

[@FullstackDevelopment]

Thank you John i really appreciate it.

[@sazyt]

Hello sir it was a great video
But I have a question :-
How i can add " *Request Desktop Sit* " features for my website visitors from Mobile ?

[@santunu23]

Thank you so much, the concept is clear now.

[@FullstackDevelopment]

Thanks!

[@charankumar9897]

Great , you have cleared my doubt to some extent , when I click on the hamburger icon to open the top navigation it is overlapping with body content . What is the solution for that. Any one please help me.

[@sagittariansage_2271]

Simple and understandable. Thank you sir.

[@FullstackDevelopment]

Dapper Owl812 Thank you, glad you like it

[@rahxephon76]

Nice vid easy to follow and understand. Keep it up two 👍 up

[@FullstackDevelopment]

Thanks alot!

[@joshuakirby6952]

Is it possible to switch media content between screen sizes? For example, switching from fullscreen video to image carousel in a banner container once mobile is detected.

[@rabbihasan3515]

Good video man...

[@FullstackDevelopment]

Thanks appreciate it

[@rabbihasan3515]

Bro are You Web Designer or Developae?

[@FullstackDevelopment]

@@rabbihasan3515 I'm a developer but i write both UI and backend.

[@augustovidal6420]

Great job, i really enjoyed it.

[@FullstackDevelopment]

Thanks

[@asmaliaquat2593]

This is just excellent ,....Thankyou so much sir.! :)

[@FullstackDevelopment]

Thank you, i'm glad you like it.

[@FullstackDevelopment]

Thanks! Glad you like it.

[@codeIMperfect]

thanks sir, but what if we want different layout if the browser is in full screen?

[@muhammadmueez22]

my google chorme is not opening when i am running it pls help any one shows failed debugger

[@roesius]

Great video! Thanks!

[@FullstackDevelopment]

Thank you!

[@davordakic1387]

Is this do same thing with nav bar, logo image, articles, footer and other stuff? Or for each component goes another media query?

[@spartandeva3825]

Thank u so much for ur help

[@FullstackDevelopment]

Thanks!

[@mr.zeonilyt4599]

should i have to give container also in media query??

[@bobbyG883]

Täck, Bra jobbat.

[@FullstackDevelopment]

Du är wälcome!

[@pjmclenon]

hello how do you quiclky copy and paste?..i alsways have to selct the text then selct the area to paste and right click each time its very slow ..Lisa

[@pjmclenon]

after alot of searching on the web the best i found was (w/out any auto software) is select the text then Ctrl + c and then put your mouse on the next line and then shift+ alt +downarrow (press down arrow as many times as needed to paste text) and then ctrl + v..still alot of work Lisa

[@ahsanhashmi6741]

Thank you so much!

[@FullstackDevelopment]

You're welcome!

[@anuragpandey2493]

suppose my container has a lot of , and tags so will i have to set max width for all tags to make them responsive??

[@CS-Gowtham-R]

Yes

[@TheBobstar89]

I appreciate the video however you started to get into the CSS Media Queries 9 minutes into the video, you could have easily created the divs and width percentages BEFORE recording the video and taken 2 minutes to briefly introduced the code . I actually wasn't interested in the box creation.
I really enjoyed the mention of the different media types. I really want to know how to seamlessly change the layout gradually as window space grows smaller. You only showed the changes based on clicking on bars at the top which make no sense to me.
Thanks for the video

[@FullstackDevelopment]

Thanks for your feedback Bobstar. To seamlessly change the layout you can drag the handle on the right side of the browser screen emulator.

[@TheBobstar89]

Thanks heaps!

[@desireeschembri03]

you saved me xD

[@mitaleeghosh4824]

thanku so much sir

[@FullstackDevelopment]

Thanks!

[@jaggibawa8390]

Sir text editor was used in this video ?

[@joeb1776]

Sublime Text

[@Cipherdigital]

Which editor your using

[@FullstackDevelopment]

Sinan anis sublime text