Css media query

Media query

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Css media query

/* BOOSTRAP MEDIA BREAKPOINTS */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
  .selector {
  	background-color:#f00;
  }
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

Source: bootstrapcreative.com

Media query

@media only screen and (min-device-width: 900px) and (max-device-width: 1200px) {
  /* insert styles here */
}

Media query

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

Source: stackoverflow.com

Media query in css

 /*Any Mobile Device*/
@media only screen and (max-width: 767px) { }
 /*Tablets Device*/
@media only screen and (max-width: 991px) { }
 /*ipad Pro  Device*/
@media only screen and (max-width: 1024px) { }
 /*large  Device*/
@media only screen and (max-width: 1200px) { }

Css media query

@media screen and (min-width: 992px) {   
    .greater-than-large {
    color: red;
    }
}
@media screen and (max-width: 576px) { 
    .less-than-extra-small {
    color: red;
    }
}
@media screen and (min-width: 576px) and (max-width: 992px) { 
    .between-small-and-medium {
    color: red;
    }
}

Similar codes

25 votes116 views4 answers
Remove outline
CSS
0 vote117 views1 answer
Div nth child
CSS
0 vote109 views3 answers
Center ul
CSS
34 votes111 views4 answers
Css hide element
CSS
1 vote116 views1 answer
Css selector to change long bot description top.gg
CSS
49 votes155 views5 answers
How to remove bullets from ul
CSS
28 votes130 views6 answers
Background image react
CSS
4 votes113 views1 answer
Height 100% of the screen
CSS
0 vote141 views1 answer
Bootstrap-navbar-containers
CSS Bootstrap
0 vote122 views1 answer
All heading tags selector scss
CSS