I wrote media queries for xxl screens by keeping laptops setting scale 100% . Now for resolution 1920*1080 its working properly on 100% scale but if I change scale to 150% or 125% then main model of my login page is going down, how I can fix this?
Thank you for this great video it is edited so well and you did a great job of explaining. i just have a few questions though. how do you know what the breakpoint is when resizing the screen? And of course there are many different screen sizes in the world but we don't know all of them. so how do you make the website accurately sized so it looks good in all screens? Also around here 3:14 you talked about the chrome dev tools and how to see different devices. My question is that there some devices missing for example there is no option for a windows laptop so is there any way i can fix this problem? apologies if this doesn't make sense i am still quite unsure about media query's. thanks again for the video. just subscribed and liked!
See we design website for all devices. But we can't make them perfect for all the devices. That's why in media query we cover ranges. For example, 378px to 480px. If any device width is between this size, we apply styles for those devices.
@@CodeBlessYou Oh, because I tried doing it in my VS Code and it didn't work. There are so many ways to customize VS Code so maybe you've got some extension or something that makes it work. I'll google it and find it. Thank you! And thank you for your tutorials!
Hey brother. I had a request. Can you please make a video on "vertical three-dots", "⋮" like how to make it more effective? As we see in various web pages. For example, the three dots in the Flipkart website are at the top-right corner. Consider in Flipkart webpage, as we hover over it, the options are displayed even the options div part goes in another div. So can you please help with this.
Very useful and helpful. Thanks. can you please make a video to explain the concept of min-width and max-width in regards to media query. like the behaviors of each
Sure I will, Also right now I am working on HTML and CSS Master Course (10+ hours)... But It takes a lot time in filming, editing and all this things. But I will try my best to complete that as soon as possible :)
I tried using this method and I’m having trouble to show display: block in media queries and this is how my code would be setup .example-class { Display: flex; } @media screen and (min-width: 480px) { .example-class { Display: block; } }
BUT HOW TO FIX OUR WEBPAGE WITH SAME HEIGHT,WIDTH AND OTHER PROPERTIES ON EVERY DEVICE, LIKE PC,LAPTOP OR MOBILE,TABLETS HAVING DIFFERENT SIZES? KINDLY MAKE A VIDEO ON IT
very well explained and easy to understand. Thank you so much
Welcome and Thanks for this comment❤
thank you so much this tutorial is so comprehensive
Thanks for watching❤❤❤
Straight to the point.
❤❤❤
God bless you for explaining so well
God bless you too Thanks for your support😀❤
such an amazing explanation skill!
thanks a lot and keep it up!
Thanks for your Feedback😀
Good simple short and point to point 💯🔥
Thanks for this comment😀❤
I LOVE how you explain it. Clear and Simple👍
❤❤
@@CodeBlessYouwhat is your IG idol
Thank you for the crystal clear explanation 🙂
❤❤❤
Excellent. no lag, only points .
❤❤❤
Bhai who are you and what are you, from last 5 days Yoh have solved like ever single problem of mine regarding front end. Kudos to you
I just want to help others... BTW Thanks for Commenting, It means a lot to me❤
Bro you are really amazing. thankyou so much ☺️☺️☺️☺️☺️
Grateful for your support❤❤
you are gr8 ..it simply class langauge to teach
Thank you so much for your support❤❤❤
thanks for the best explanation of media query.
Thanks for your support. Really grateful for that❤❤
@@CodeBlessYou Welcome
I wrote media queries for xxl screens by keeping laptops setting scale 100% . Now for resolution 1920*1080 its working properly on 100% scale but if I change scale to 150% or 125% then main model of my login page is going down, how I can fix this?
You can use Position fixed for fixing elements.
thanks a lot
❤❤❤
Thank you for this great video it is edited so well and you did a great job of explaining. i just have a few questions though. how do you know what the breakpoint is when resizing the screen? And of course there are many different screen sizes in the world but we don't know all of them. so how do you make the website accurately sized so it looks good in all screens? Also around here 3:14 you talked about the chrome dev tools and how to see different devices. My question is that there some devices missing for example there is no option for a windows laptop so is there any way i can fix this problem? apologies if this doesn't make sense i am still quite unsure about media query's. thanks again for the video. just subscribed and liked!
See we design website for all devices. But we can't make them perfect for all the devices. That's why in media query we cover ranges. For example, 378px to 480px. If any device width is between this size, we apply styles for those devices.
@@CodeBlessYou thank you, i understand now.
Thank you 🙂🙂 it's very very helpful
Grateful for your feedback❤❤❤
Thank you
❤❤❤
Great explanations! Thank you! And how do you set up VS Code to do those awesome keyboard shortcuts? I need that!
I didn't set anything for shortcuts. They are made by VS code❤❤
@@CodeBlessYou Oh, because I tried doing it in my VS Code and it didn't work. There are so many ways to customize VS Code so maybe you've got some extension or something that makes it work. I'll google it and find it. Thank you! And thank you for your tutorials!
You can watch my VS code extension video on my channel. You will get all @@mightydawnweb
good explanation .......
Thanks😀
thanks for the clarification 👍
❤❤
Thanks, I learned alot from this.
please, what is the name of the extension you used.
Which extension? For theme I use AYU Mirage
Hey brother. I had a request. Can you please make a video on "vertical three-dots", "⋮" like how to make it more effective?
As we see in various web pages. For example, the three dots in the Flipkart website are at the top-right corner. Consider in Flipkart webpage, as we hover over it, the options are displayed even the options div part goes in another div. So can you please help with this.
I will make tutorial on that but it takes time to upload
@@CodeBlessYou Yes I'll wait for the video. Thanks.
THANK YOU SO MUCH, IT WAS SO WELL EXPLAINED!!
My pleasure, Thanks for comment❤
Very useful and helpful.
Thanks.
can you please make a video to explain the concept of min-width and max-width in regards to media query. like the behaviors of each
Sure I will, Also right now I am working on HTML and CSS Master Course (10+ hours)... But It takes a lot time in filming, editing and all this things. But I will try my best to complete that as soon as possible :)
Can you make a video React unit testing
Mast explanation
❤❤
I tried using this method and I’m having trouble to show display: block in media queries and this is how my code would be setup
.example-class {
Display: flex;
}
@media screen and (min-width: 480px) {
.example-class {
Display: block;
}
}
Try to inspect using chrome dev tools...
If you still face same error, You can contact me on Instagram :)
Thanks
❤❤
BUT HOW TO FIX OUR WEBPAGE WITH SAME HEIGHT,WIDTH AND OTHER PROPERTIES ON EVERY DEVICE, LIKE PC,LAPTOP OR MOBILE,TABLETS HAVING DIFFERENT SIZES? KINDLY MAKE A VIDEO ON IT
I will
@@CodeBlessYou kindly as soon as possible
Bro whin i apply media query and go to live server page box was not visible why
I think, you apply wrong condition for media query.. Try to inspect the page and try to find the box
nice video!
Thanks for Comment😀
Hello, Can you tell me is Media Query a class or not?
No Media Query is not Class. We define styles inside media query
Subscribed 😅
❤❤
copy from code with herry.
@CodeWithHarry is inspiration for me brother❤
I need help
Which help
thanks
My pleasure 😀