Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

You must login to ask question.

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

How to use mobile responsive media query in css

How to use mobile responsive media query in css

Any web developer can easily develop the website and make that website live. But if that website does not look right on the mobile, then the user gets the wrong effect.

That user does not come back to that website. For this reason, the website has to be responsive before it is developed or after it is developed. To respond to the website, we have to write CSS in the CSS file itself.

We have to write it inside the media query. Writing CSS in media query has no effect on our desktop version. This makes our website easily mobile responsive. We have given examples of some media queries. You can make your website mobile responsive by using them.

// This media query use for maximum width 767px on the mobile port

@media (max-width: 767px) {

.className { font-size:20px; }

}

// This media query use for minimum width 480px & maximum width 767px on mobile port

@media only screen and (min-width: 480px) and (max-width: 767px) {

.className { font-size:20px; }

}

// This media query use for minimum width 768px & maximum width 991px on iPaid port

@media (min-width: 768px) and (max-width: 991px) {

.className { font-size:20px; }

}

// This media query use for minimum width 992px & maximum width 1024px on iPaid port

@media (min-width: 992px) and (max-width: 1024px) {

.className { font-size:20px; }

}

Leave a comment