Question

I’m using Twitter Bootstrap and my site have some issues when I’m opening it in mobile device.

My header looks very bad, when I resize the window it looks like this:

It should be like this in all devices:

Here is my HTML:

     <ul class="nav pull-right">

          <li><a href="index.html"><b>Home</b></a></li>
          <li class="divider-vertical"></li>

          <li class="dropdown">
          <a href="#" class="dropdown-togle" data-toggle="dropdown">
          <b>Download</b>
          <b class="caret"></b></a>
          <ul class="dropdown-menu">
          <li><a href="downloading_link.html">Meepo for iPhone</a></li>
            <li><a href="#" id="not_active">Android coming soon</a></li>
            </ul>
            </li>

          <li class="divider-vertical"></li>
          <li><a href="faq.html"><b>F.A.Q.</b></a></li>
          <li class="divider-vertical"></li>
          <li><a href="support/index.html" id="last_link"><b>Support</b></a>
          </li>  
        </ul>

and CSS:

   .navbar .nav.pull-right {
   margin-left: 10px;
   margin-top:40px;
   margin-right: 0;
   background-image: url('../img/menuBG.png');
   background-repeat: no-repeat;
   height:57px;
   }

I think I need to remove background image here, to make it usable on mobile devices.

Can I make it look better on moble devices (the same as in PC)? I need to write some new css ONLY for mobile phones ? Maybe I shouldn’t use responsive css for resizing ?

Answer 1

This is do to overflow.

You need to either set overflow to hidden or none;
There’s a few other things you can do to prevent this from happening.

Settings the viewport meta-tag correctly can help, that would look something like this:

<meta name='viewport' content='user-scalable=no'>

You can also use relational values for your menu items that scale well, such as ems or percentages. A quick way to convert px values to ems is to divide by the parent element’s font-size (usually the body being around 16px)

So your CSS would now look something like this:

.navbar .nav.pull-right {
   margin-left: 0.625em;
   margin-top: 2.5em;
   margin-right: 0;
   background-image: url('../img/menuBG.png');
   background-repeat: no-repeat;
   height:3.5em;
}