Skip to content

Instantly share code, notes, and snippets.

@bencallahan

bencallahan/Responsive Retrofit of Stripe’s Atlas Site

Created February 24, 2016 15:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bencallahan/4129c080237d771851b1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bencallahan/4129c080237d771851b1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bencallahan created this gist Feb 24, 2016.
    75 changes: 75 additions & 0 deletions Responsive Retrofit of Stripe’s Atlas Site
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@

    @media (max-width: 1000px) {

    html:root {
    min-width: 100%;
    }

    .block, .inner-col {
    width: 90%;
    margin-left: 5%;
    }

    header#main-header ul.external {
    position: relative;
    margin-top: 1em
    }

    #main-content header h1 {
    width: 90% !important;
    }

    #pillars li {
    width: 100% !important;
    }


    #stories .story {
    display: block !important;
    }
    #stories .story .content {
    width: 90% !important;
    float: left;
    margin: 5%;
    }

    #stories .story .media {
    margin-left: 10%;
    width: 80% !important;
    margin-bottom: 2em;
    }

    #stories .story .media iframe {
    width: 98%;
    }

    #mini-faq li, #mini-faq ul {
    display: block !important;
    width: 80%;
    padding-left: 10%;
    }

    #mini-faq li:nth-child(2) {
    border-width: 0px !important;
    padding: 3em 0 3em 10% !important;

    }

    #main-content .content {
    width: 45%;
    margin-left: 5%;
    }

    }


    /* had to add this wrapper to get an intrinsic ratio */
    div#motive-wrapper {
    position: relative;
    width: 50%;
    }
    #motivation .illustration {
    width: auto;
    height: auto;
    padding-bottom: 100%;
    }