responsive.css

/* TABLET */

@media(max-width: 1000px) {
    .container {
        width: 670px;
    }

    /* TABLET main-section */
    .main-section h1 {
        font-size: 40px;
    }

    /* TABLET category-section */
    .category-section {
        height: 870px;
        text-align: center;
        padding: 20px 0px;
    }

    .category, .tutorial {
        width: 50%;
    }

    .category-txt {
        width: 50%;
        display: inline-block;
        margin: 10px 0px;
    }

    /* TABLET tutorial-section */    
    .tutorial-section {
        height: 270px;
        text-align: center;
        padding: 20px 0px;
    }
}

/* SMARTPHONE */

@media(max-width: 670px) {
    .container {
        width: 450px;
    }

    /* SMARTPHONE header */
    .header-right {
        display: none;
    }

    .menu-icon {
        display: block;
    }

    /* SMARTPHONE main-section */
    .main-section h1 {
        font-size: 40px;
    }

    /* SMARTPHONE category-section */
    .category-section {
        height: 1350px;
        text-align: center;
        padding: 20px 0px;
    }

    .category, .tutorial {
        width: 100%;
    }

    .category-txt {
        width: 75%;
        display: inline-block;
        margin: 10px 0px;
    }

    /* SMARTPHONE tutorial-section */    
    .tutorial-section {
        height: 390px;
        text-align: center;
        padding: 20px 0px;
    }

    /* SMARTPHONE footer */
    .footer-media a {
        display: none;
    }
}