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 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>