css media queries | css media queries tutorial in hindi | responsive web design | media queries #css

super

sir today after watching your video i make this, can you pls help me by replaying where i can improve it, thanks

* {
padding: 0;
margin: 0;
box-sizing: border-box;
/* background-color: rgb(193, 153, 174); */
}

h1 {
color: blue;
font-size: 4rem;
text-align: center;
padding: 23px 0px;
border: 2px solid goldenrod;
border-radius: 10px;
background-color: darkgray;
margin: 10px;
text-shadow: 3px 4px 7px rgb(233, 40, 40);
}

.main {
width: 100%;
height: 320px;
background-color: aquamarine;
border: 5px solid black;
display: flex;
}
body{
background-color: chocolate;
height: auto;
}

.child1 {
width: 46%;
height: 92%;
border: 8px solid rgb(238, 241, 47);
margin: auto;
background-color: aliceblue;
}

.child1 p {
font-size: 28px;
padding: 22px;
text-align: justify;
color: blueviolet;
}

.child2 {
width: 46%;
height: 92%;
border: 2px solid wheat;
margin: auto;
background-color: rgb(32, 169, 169);
}

.child2 img {
width: 100%;
height: 100%;
padding: 20px;
border: 8px solid rgb(228, 150, 150);

}



@media only screen and (max-width: 720px) {



h1 {
color: rgb(15, 248, 73);
font-size: 3rem;
background-color: rgb(168, 220, 222);
}

.child1 p {
font-size: 21px;
text-align: justify;
color: rgb(247, 0, 255);
/* background-color: beige; */
/* border: 5px solid black; */
/* border: 2px solid rgb(206, 16, 16); */

}


.child2{

height: auto;
}

.child2 img{
width: 100%;
height: auto;
}




}

@media only screen and (max-width: 472px) {

body{
background-color: rgb(160, 132, 185);

}

h1 {
color: rgb(36, 134, 52);
background-color: antiquewhite;
border: 5px solid black;
font-size: 2rem;
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: yellow;
}

.main {
display: block;
height: auto;
/* margin: 4px; */
/* margin-top: 8px; */
}

.child1 {
width: 95%;
height: 92%;
background-color: aliceblue;
margin: 8px auto;
}

.child1 p {
width: 100%;
height: auto;
color: rgb(23, 2, 30);
text-align: justify;
}

.child2 {
width: 100%;
height: auto;
background-color: rgb(54, 144, 223);
/* margin: 2px auto; */
}

.child2 img {
width: 100%;
height: auto;
/* padding: 10px; */
/* margin: 10px auto; */
border: 0px solid black;
}
}

Superb ❤sir

❤❤❤

Bhut he badiya tarika se bata thanks

tnx

ek bar table ko and div ke andar image ko responsive kar ke batao?

Nice explanation sir😊

Thanks for clearing my doubt about responsive design 🙌❤️

HTML CSS aur javascript me career hai?

This is good video for Responsive property.👍👍👍

thank you
very good explanation

Bhai mzaa aagya kisi channel ka smj nhi arha tha mujhe finally got it❤
Thanks Bhai smj aagya😊

A teacher makes study intresting and you proved it sir

thanks a lot

Can i get the code?

Thanks a lot

Waah dimaag se pura dout clear ho gaya.....Each and every concept explained deeply. TSM

Really helpful

Thank you so much sir....

thanks

Jordar explain bhai 👏

thanks a lot brother.

thanku bro

very nice explanation...please come up with more media queries lecture

Thanks Sir 🙏

U r great 👍

This is very usefull video..

Bakwwas bahot kiyaa kuch code karke bataa

great work keep it up

Nice👍
Just hit the century🤩

sir mene ek website design ki hai toh usme 500 lines css hai toh ab mujhe renponsive ke liye har tag ke lliye media queries likh sir samj ni aa rha renponsive kese karu help me sir

Hi .. it's a great explanation... But I have a doubt... I have placed 4 media queries in my CSS ... Everything is working fine but exactly at the break point the design is taking the shape of both media queries... How to fix it?

From 🇧🇩

Your teaching skill is so good. It can be the best Media Q tutorial. Thanks

i spend my whole day and finally got this vedio great work keep it up....

Beautiful explanation....☺️
Each and every concept explained deeply.
Thank you 😊

Kindly it is our request, responsive projects banate raho ❤️❤️❤️❤️❤️❤️❤️❤️❤️

Keeep teaching us ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

Love you yrr, you are only one jisk baat samjh aaii mujhe

moj kr di guru ji

I wanna create one website but I have problem when I start type the code after the completion my page that time I realised this media queries are must because of our website 95% people see website but I put it bootstrap css file but can't work so plz help me sir my work is stuck only this topic..... Plz help me

Awesome bro

Nice bro. Aap ek pura web development and react native app developmet ka course banaiye plzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz,again 👍nice

Thanks sir

Thanks 👍