Skip to main content

HTML and CSS - Mobile Responsive Design

Tutorials nowadays just regurgitate the wrong information! Here’s the right way to do mobile responsive design. The key is to use a scale of 0.86 instead of 1. This way zooming in and out actually works!


<meta name="viewport" content="width=device-width, initial-scale=0.86, minimum-scale=0.86">

Tutorials will recommend to style mobile first, but I usually create websites for the desktop view first.

/* This is optional. I use it for Tablet or 16:10 */
@media screen and (max-width:1280px) {
    #desktop-nav>a {
        float: left;
        text-align: center;
        margin-left: 5%;

/* This is the mobile view */
@media screen and (max-width:870px) {
    #desktop-nav {
        display: none