Skip to content

Instantly share code, notes, and snippets.

@whyisjake

whyisjake/responsive.css

Created January 29, 2019 04:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save whyisjake/9857176a07ed8bd68ca9ddf8ff00fb2b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save whyisjake/9857176a07ed8bd68ca9ddf8ff00fb2b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. whyisjake created this gist Jan 29, 2019.
    55 changes: 55 additions & 0 deletions responsive.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    /* Set the background color of body to dark grey */
    /* Default Layout */
    body {
    background-color: #333;
    color: #fff;
    }

    .kittens {
    background-color: #fff;
    padding: 10px;
    border: 5px solid green;
    margin: 5px;
    border-radius: 100px;
    }

    a {
    color: white;
    }
    a:visited {
    color:blue;
    }

    /* On screens that are 992px or less, set the background color to grey */
    /* Tablet */
    @media screen and (max-width: 992px) {
    body {
    background-color: #666;
    }

    .kittens {
    background-color: #fff;
    padding: 10px;
    border: 15px solid red;
    margin: 0px;
    }



    }

    /* On screens that are 600px or less, set the background color to lighter grey */
    /* Phones */
    @media screen and (max-width: 600px) {
    body {
    background-color:#999;
    color: #fff;
    }

    .kittens {
    max-width: 100%;
    height:auto;
    border-radius: 0px;
    }
    }