Skip to content

Instantly share code, notes, and snippets.

@gokulkrishh

gokulkrishh/media-query.css

Last active April 22, 2025 04:29
Download ZIP

Revisions

  1. gokulkrishh revised this gist Oct 28, 2020. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions media-query.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@

    @media (min-width: 1281px) {

    //CSS
    /* CSS */

    }

    @@ -17,7 +17,7 @@

    @media (min-width: 1025px) and (max-width: 1280px) {

    //CSS
    /* CSS */

    }

    @@ -28,7 +28,7 @@

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

    //CSS
    /* CSS */

    }

    @@ -39,7 +39,7 @@

    @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    //CSS
    /* CSS */

    }

    @@ -50,7 +50,7 @@

    @media (min-width: 481px) and (max-width: 767px) {

    //CSS
    /* CSS */

    }

    @@ -61,6 +61,6 @@

    @media (min-width: 320px) and (max-width: 480px) {

    //CSS
    /* CSS */

    }
  2. gokulkrishh revised this gist Oct 28, 2015. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions media-query.css
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@

    /*
    ##Device = Laptops, Desktops
    ##Screen = B/w 1024px to 1280px
    ##Screen = B/w 1025px to 1280px
    */

    @media (min-width: 1025px) and (max-width: 1280px) {
    @@ -23,7 +23,7 @@

    /*
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1023px
    ##Screen = B/w 768px to 1024px
    */

    @media (min-width: 768px) and (max-width: 1024px) {
    @@ -34,7 +34,7 @@

    /*
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1023px
    ##Screen = B/w 768px to 1024px
    */

    @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    @@ -44,7 +44,7 @@
    }

    /*
    ##Device = Tablets, Mobiles (Landscape)
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
    */

    @@ -55,7 +55,7 @@
    }

    /*
    ##Device = Most of Mobiles (Portrait)
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
    */

  3. gokulkrishh revised this gist Oct 28, 2015. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion media-query.css
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,6 @@

    }


    /*
    ##Device = Laptops, Desktops
    ##Screen = B/w 1024px to 1280px
  4. gokulkrishh revised this gist Oct 28, 2015. 1 changed file with 14 additions and 3 deletions.
    17 changes: 14 additions & 3 deletions media-query.css
    View file
    Original file line number Diff line number Diff line change
    @@ -16,18 +16,29 @@
    ##Screen = B/w 1024px to 1280px
    */

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

    //CSS

    }

    /*
    ##Device = Laptops, Tablets
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1023px
    */

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

    //CSS

    }

    /*
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1023px
    */

    @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    //CSS

  5. gokulkrishh created this gist Oct 28, 2015.
    56 changes: 56 additions & 0 deletions media-query.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@

    /*
    ##Device = Desktops
    ##Screen = 1281px to higher resolution desktops
    */

    @media (min-width: 1281px) {

    //CSS

    }


    /*
    ##Device = Laptops, Desktops
    ##Screen = B/w 1024px to 1280px
    */

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

    //CSS

    }

    /*
    ##Device = Laptops, Tablets
    ##Screen = B/w 768px to 1023px
    */

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

    //CSS

    }

    /*
    ##Device = Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
    */

    @media (min-width: 481px) and (max-width: 767px) {

    //CSS

    }

    /*
    ##Device = Most of Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
    */

    @media (min-width: 320px) and (max-width: 480px) {

    //CSS

    }