Edit

Stylesheet Coding Device-Responsive Layout

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0;"/>

CSS


@media (max-width: 480px){
}
@media (max-width: 767px){
    #container{
        padding: 0 25px;
    }
    nav ul li a{
        font-size: 100%;
        padding: 15px 0;
        border-radius: 30px;
    }
    nav ul li a svg{
        width: 60px;
        height: 60px;
    }
}
@media (min-width: 768px) and (max-width: 979px){
    #container{
        padding: 0 35px;
    }
    nav ul li a{
        font-size: 120%;
        padding: 20px 0;
        border-radius: 40px;
    }
    nav ul li a svg{
        width: 80px;
        height: 80px;
    }
}
@media (max-width: 979px){
}
@media (min-width: 980px){
    /* default rules */
}
@media (min-width: 1200px){
    #container{
        padding: 0 75px;
    }
    nav ul li a{
        font-size: 170%;
        padding: 30px 0;
        border-radius: 60px;
    }
    nav ul li a svg{
        width: 133px;
        height: 133px;
    }
}