2

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>
2
  • 1
    post the relevant code / create a demo to help you :)
    – G.L.P
    Oct 1, 2015 at 12:38
  • will do it!, just a moment Oct 1, 2015 at 12:39

3 Answers 3

6

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.

5
  • I've already got it working without this tag in other site. Do i really have to use it? Oct 1, 2015 at 12:43
  • Surprinsingly, with this tag, boostrap does not work as it should Oct 1, 2015 at 12:45
  • @AdowTatep Try to uncheck Zoom to fit in Chrome's device size preview, maybe that helps
    – x13
    Oct 1, 2015 at 12:57
  • @AdowTatep you have set nav ul li { display: inline-block; }, could you try display: block;?
    – x13
    Oct 1, 2015 at 13:02
  • you're right, if i'm using boots i don't need to have inline. Forgot to remove it after apply the rows and cols. It worked, thanks! Oct 1, 2015 at 13:05
0

That is view port issue: change your view port meta tag to:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimum-scale=1"/>
3
0

Try this in <head> part:

<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />

or in media query you can use different font sizes for small resolutions..

@media(min-width:480px){html{font-size: 90%}}
1
  • After i've done this, instead of stacked one after other(Like the mobile image on the post), it's all messy Look at the print Oct 1, 2015 at 12:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.