css CSS Media Query #css

Posted 2021-05-13

/* Default styles */
div#main { margin:40px; padding:20px; }

/* Large display 1200px and above */
@media screen and (min-width: 1200px) {
div#main { margin:50px; }
}

/* Portrait tablets 768px and above */
@media screen and (min-width: 768px) and (max-width: 979px) {
div#main { margin:30px; }
}

/* Phones to tablets 767px and below */
@media screen and (max-width: 767px) {
div#main { margin:20px; }
}

/* Phones 480px and below */
@media screen and (max-width: 480px) {
div#main { margin:10px; }
}