Skip to content

Instantly share code, notes, and snippets.

@shabanovtg

shabanovtg/css-media-resolutions.less

Created February 25, 2016 08:00
Show Gist options
  • Save shabanovtg/99da787e729833318794 to your computer and use it in GitHub Desktop.
Save shabanovtg/99da787e729833318794 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. shabanovtg created this gist Feb 25, 2016.
    133 changes: 133 additions & 0 deletions css-media-resolutions.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,133 @@
    /* wday-banner start */
    .wday-banner {
    &__i {
    &:extend(.clearfix all);
    margin-top: -5.9rem;
    background-image: url(../../img/wday/bg-banner.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;

    @media only screen and (min-width: 1700px) {
    min-height: 700px;
    }
    }

    &__content {
    &:extend(.clearfix all);
    margin: 23.5rem 0 18.4rem 50.6%;
    .font-vichy(3.8);
    font-weight: 300;
    line-height: 40px;
    text-transform: uppercase;
    }

    /* wday-banner height max 960 start */
    @media screen and (max-width: 1600px) and (max-height: 960px) {
    .wday-banner {
    &__content {
    background-color: #00ffaa;
    }
    }
    }
    @media screen and (max-width: 1366px) and (max-height: 960px) {
    .wday-banner {
    &__content {
    background-color: #FFFFaa;
    }
    }
    }
    @media screen and (max-width: 1024px) and (max-height: 960px) {
    .wday-banner {
    &__content {
    background-color: #FF88aa;
    }
    }
    }
    @media screen and (max-width: 800px) and (max-height: 960px) {
    .wday-banner {
    &__content {
    background-color: #FF00aa;
    }
    }
    }
    /* wday-banner height max 768 finish */

    /* wday-banner height max 768 start */
    @media screen and (max-width: 1600px) and (max-height: 768px) {
    .wday-banner {
    &__content {
    background-color: #00ff66;
    margin-top: 21.5rem;
    margin-bottom: 13rem;
    }
    }
    }
    @media screen and (max-width: 1366px) and (max-height: 768px) {
    .wday-banner {
    &__content {
    background-color: #FFFF66;
    margin-top: 18.5rem;
    margin-bottom: 10rem;
    }
    }
    }
    @media screen and (max-width: 1024px) and (max-height: 768px) {
    .wday-banner {
    &__content {
    background-color: #FF8866;
    margin-top: 10.5rem;
    margin-bottom: 6rem;
    }
    }
    }
    @media screen and (max-width: 800px) and (max-height: 768px) {
    .wday-banner {
    &__content {
    background-color: #FF0066;
    margin-top: 10.5rem;
    margin-bottom: 6rem;
    }
    }
    }
    /* wday-banner height max 768 finish */

    /* wday-banner height max 600 start */
    @media screen and (max-width: 1440px) and (max-height: 600px) {
    .wday-banner {
    &__content {
    background-color: #00ff00;
    margin-top: 18.5rem;
    margin-bottom: 10rem;
    }
    }
    }
    @media screen and (max-width: 1366px) and (max-height: 600px) {
    .wday-banner {
    &__content {
    background-color: #FFFF00;
    margin-top: 17rem;
    margin-bottom: 9rem;
    }
    }
    }
    @media screen and (max-width: 1024px) and (max-height: 600px) {
    .wday-banner {
    &__content {
    background-color: #FF8800;
    margin-top: 10.5rem;
    margin-bottom: 6rem;
    }
    }
    }
    @media screen and (max-width: 800px) and (max-height: 600px) {
    .wday-banner {
    &__content {
    background-color: #FF0000;
    margin-top: 10.5rem;
    margin-bottom: 6rem;
    }
    }
    }
    /* wday-banner height max 600 finish */
    }