media query for mobile min and max width both
@media only screen and (max-width: 600px) and (min-width: 400px) {...}media query for mobile min and max width both
@media only screen and (max-width: 600px) and (min-width: 400px) {...}media queries css responsive max width
@media only screen and (max-width: size in px) {
All of your css here
}what is a max and min width media query
/* What this query really means, is If [device width] is less than or equal to 600px, then do */
@media only screen and (max-width: 600px) {...}
/* What this query really means, is If [device width] is greater than or equal to 600px, then do */
@media only screen and (min-width: 600px) {...}media query min and max width for all devices
@media only screen and (max-width: 480px) and (min-width: 320px) {
/* mobile-devices */
.width {
background: var(--clr-grey);
}
}
@media only screen and (max-width: 768px) and (min-width: 481px) {
/* iPads, Tablets */
.width {
background: var(--clr-pink);
}
}
@media only screen and (max-width: 1024px) and (min-width: 769px) {
/* small screens, laptops */
.width {
background: var(--clr-yellow);
}
}
@media only screen and (min-width: 1024px) {
/* Desktops, large screens */
.width {
background: var(--clr-yellow);
}
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
