Css – page width in bootstrap responsive design on iphone

cssiphoneresponsive-designtwitter-bootstrap

I have a bootstrap responsive design working well on a wide range of browsers, but the page width is limited on iPhone. I have already added the viewport meta tag:

And it does not seem to help. The site is here: http://themenuengine.com. Any advice would be much appreciated!

Best Answer

Around line 780 of bootstrap-responsive.css:

@media (max-width: 767px) {
  body {
    padding-right: 20px;
    padding-left: 20px;
  }

Override that padding with 0 and it will be full-width.

For example:

@media (max-width: 767px) {
  body {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

Related Solutions

Css – How to make Twitter Bootstrap menu dropdown on hover rather than click

To get the menu to automatically drop on hover then this can achieved using basic CSS. You need to work out the selector to the hidden menu option and then set it to display as block when the appropriate li tag is hovered over. Taking the example from the twitter bootstrap page, the selector would be as follows:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

However, if you are using Bootstrap's responsive features, you will not want this functionality on a collapsed navbar (on smaller screens). To avoid this, wrap the code above in a media query:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

To hide the arrow (caret) this is done in different ways depending on whether you are using Twitter Bootstrap version 2 and lower or version 3:

Bootstrap 3

To remove the caret in version 3 you just need to remove the HTML <b class="caret"></b> from the .dropdown-toggle anchor element:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 & lower

To remove the caret in version 2 you need a little more insight into CSS and I suggest looking at how the :after pseudo element works in more detail. To get you started on your way to understanding, to target and remove the arrows in the twitter bootstrap example, you would use the following CSS selector and code:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

It will work in your favour if you look further into how these work and not just use the answers that I have given you.

Thanks to @CocaAkat for pointing out that we were missing the ">" child combinator to prevent sub menus being shown on the parent hover

Twitter-bootstrap – Simple Bootstrap page is not responsive on the iPhone

Make sure you add:

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

to your <head>.

I had a similar problem and I mistakenly thought it was just a matter of viewport width.

Update: check out @NicolasBADIA answer for a more complete version.

Best Answer

Related Solutions

Css – How to make Twitter Bootstrap menu dropdown on hover rather than click

Twitter-bootstrap – Simple Bootstrap page is not responsive on the iPhone

Related Topic