Search code examples
htmlcssmobileresponsive-designresponsiveness

Elements appear smaller in mobile

i'm having a headache with this problem and i don't know where it's coming from

Basically i'm making this site, ok, everything is working fine until you try it on mobile, it's incredibly small. I've worked using the same methods in other site and this didn't hapenned at all, i didn't had to use meta or any media query, and it's still only a nav menu. So i'm using ul with class row and li with the col-sm-12 and col-md-4 so it works like desired.

That's the pc view PC view

That's the mobile view

Mobile view

All the sizes are in rem and em. The itens are supposed to stack when mobile, and it did, but everything it's super small

The demo: https://jsfiddle.net/nnhfqL2L/2/

body {
margin: 0;
padding: 0;
border: 0;
background-color: #666;
font-family: 'Roboto', Verdana, Tahoma, sans-serif;
}

/*Header*/
/*Nav*/
nav {
    border-bottom: 4px solid #888;
}

nav ul {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    background-color: #fff;
    text-align: center;
        font-size: 1.5rem;
}

    nav ul li {
        display: inline-block;
    }

        nav ul li a,a:hover {
            text-decoration: none;
            color: #000;
        }

            nav ul li section {
                padding: 0.8em;
            }

            nav ul li .menuStrap {
                background-color: #000;
                height: 3px;
                margin: 0 auto;
                width: 0;
                transition: width 0.2s;
                transition-timing-function: ease-out;
            }

            nav ul li a:hover .menuStrap {
                width: 100%;
            }


<header>
    <nav>
        <ul class="row">                
            <li class="col-sm-12 col-md-3">
                <a href="#">                    
                    <section>Winpad ★</section>
                    <div class="menuStrap"></div>                       
                </a>
            </li>
            <li class="col-sm-12 col-md-3">
                <a href="#">
                    <section>Produtos</section>
                    <div class="menuStrap"></div>
                </a>
            </li>
            <li class="col-sm-12 col-md-3">
                <a href="#">
                    <section>Sobre</section>
                    <div class="menuStrap"></div>
                </a>
            </li>
            <li class="col-sm-12 col-md-3">
                <a href="#">
                    <section>Contato</section>
                    <div class="menuStrap"></div>
                </a>
            </li>
        </ul>       
    </nav>

</header>
Solution

  • Put this in the <head>:

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

    https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

    By the way, it is better practice to manually resize your browser window to the wanted size, you can download extensions/plugins for browser to resize your browser window or display current window size.