CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ashley_L
Ashley_L

Reputation: 9

I can't figure out why my website isn't responsive

I attempted to create a website mirroring the Flipboard website with the Bootstrap grid; however, my website is not responsive and I can't figure out why. I did add a nav role to the menu because I wanted it to stay at the top as you scroll down (at least, this was the option that worked best for me). When I load it on an iPhone the screen scrolls very far to the right and I'm just not sure why. Any help would be greatly appreciated.

Here is the html:

<!doctype html>
<html lang="en"> 
<html>
    <head>
    <meta charset="utf-8"/>
      <meta content="initial-scale=1.0" name="viewport"> 
      <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
          <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
          <link href="test.css" rel="stylesheet">
            <title>Test Responsive Website</title>
    </head>
  <body>
    <div class="header">
      <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
      <div class="container">
          <p><a href="#">Lorem</a></p>
        <ul class="menu">
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle">Sit Amet<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Consectetur</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
    </div>


    <div class="container">
          <div class="row">
            <div class="about col-xs-5">
              <h1>Lorem Ipsum</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
          </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
  </html>

Here is the CSS:

/* General */

.container {
  width: 960px;
}

/* Header */

.header .navbar {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #ddd;

  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  color: #898989;

  font-size: 17px;
  padding: 15px;
}

.header p {
  float: left;
  display: inline;
  list-style: none;
  margin-top: 5px;

  color: #898989;
}

.header a {
  color: #898989;
}

.header a:hover {
  color: #363636 ;
}
/* Menu */ 

.header .menu {
  float: left;
  list-style: none;
  margin-top: 5px;
}

.menu > li {
  display: inline;
  padding-left: 20px;
  padding-right: 20px;
}

.menu a {
  color: #898989;
}

/* Dropdown */

.dropdown-menu {
  font-size: 16px;
  margin-top: 5px;
  min-width: 105px;
}

.dropdown-menu li a {
  color: #898989;
  padding: 6px 20px;
  font-weight: 300;
}

/* Main */

.about h1 {
  color: #363636;  

  font-family: 'Oswald', sans-serif;
  font-weight: 400;

  font-size: 40px;
  margin-top: 105px;
  margin-bottom: 0px;
}

.about p {
  color: #959595;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15em;
  line-height: 1.75em;
  margin-bottom: 15px;
  margin-top: 15px;
}

Upvotes: 0

Views: 1240

Answers (1)

Kiz
Kiz

Reputation: 439

It's the width: 960px; you've added to the container class in your css

try removing the styling on container

if you're going for a grid container that spans the width of the screen you could also try changing your container div class to use <div class="container-fluid"> utilising Bootstrap's built in grid container so that it behaves in a responsive way

Upvotes: 1

Related Questions