CODEWITHSUNDEEP
csstwitter-bootstrapmobile
Kyriakos Kokkinos
Kyriakos Kokkinos

Reputation: 3

Twitter Bootstrap not responsive on Mobile

I am making my first website with bootstrap and while i was working on it from my desktop everything was fine.

When i transferred it over to FTP and viewed it on my mobile i noticed the responsiveness is all messed up. The navbar button cannot be seen and i have to move the page to the right to see it and there is also some white space there which makes no sense.

When i view the website on desktop and resize it everything is fine.

I have tried :

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

You can view the website on mobile at http://kyriakoskokkinos.royalwebhosting.net/index.html and see the problem for yoursevles.

Any help will be greatly appreciated as this is driving me nuts. Thanks.

Upvotes: 0

Views: 326

Answers (1)

Alex
Alex

Reputation: 1606

Remove width: 400px; from CSS of div id="menu-section". Or add max-width: 400px;. That is the container that introduces the horizontal scrolling.

#menu-section {
  float: none;
  margin: 0 auto;
  padding: 20px;
  margin-top: 115px;
  background-color: #fff;
  height: 180px;
  text-align: center;
  border: 6px solid #EEE;
  max-width: 400px;
}

Upvotes: 1

Related Questions