CSS Media Query Max And Min Width Code

CSS media query max and min width code example snippets.

/* Max-width */
@media only screen and (max-width: 980px)  {...}

/* Min-width */
@media only screen and (min-width: 576px)  {...}

/* Combining media query expressions */
@media only screen and (max-width: 980px) and (min-width: 576px)  {...}

/* Example */
@media only screen and (max-width: 980px) and (min-width: 576px)  {
  .container {
    display:block;
    margin:20px;
  }
}

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.