with bootstrap navbar on mobile & ipad

Question

I've been trying to get my site to work on mobile and iphone 5 (works fine on iphone 6). it works on the emulator but on the server it doesn't. I'm getting a margin of some 20px to my right.

it works fine on the web : anandandakhil.me

I looked up some threads here on stackoverflow but they didnt work.

one of them was @media(max-width:768px)

i tried attaching it to the class navbar , navbar-collapse

here's the code

index.html

Toggle navigation

Home

About

Portfolio

Get in Touch

style.css

 #navbar-header.navbar-default { font-size: 16px; background-color: rgba(255, 255, 255, 1); border-bottom-width: 1px; } #navbar-header.navbar-default .navbar-nav>li>a { color: rgba(119, 119, 119, 1); background-color: rgba(255, 255, 255, 1); } #navbar-header.navbar-default .navbar-nav>li>a:hover, #navbar-header.navbar-default .navbar-nav>li>a:focus { color: #f28500; background-color: rgba(255, 255, 255, 1); } #navbar-header.navbar-default .navbar-nav>.active>a, #navbar-header.navbar-default .navbar-nav>.active>a:hover, #navbar-header.navbar-default .navbar-nav>.active>a:focus { color: #f28500; background-color: #fff; } @media(max-width:768px) { #navbar-header.navbar-default .navbar-toggle { border-color: #f28500; } #navbar-header.navbar-default .navbar-toggle:hover, #navbar-header.navbar-default .navbar-toggle:focus { background-color: #ffffff; } #navbar-header.navbar-default .navbar-toggle .icon-bar { background-color: #f28500; } #navbar-header.navbar-default .navbar-toggle:hover .icon-bar, #navbar-header.navbar-default .navbar-toggle:focus .icon-bar { background-color: #f28500; } } 

Answer 1

I am using Bootstrap as well.

As far as I know, the screen resolution of a mobile phone is different than its css resolution. For example iPhone 5 has a screen resolution of 640x1136, but the css resolution is 320x568.