Newsroom not responsive


#1

Hello,

On this exercise, the page looks good on full screen but very bad when we reduce the size of the screen.

ref here

Find code below

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
  <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <div class="col-md-4">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/newsroom/logo.svg"/>
        </div>
        <form class="search-form">
          <input type="text" placeholder="Search Newsroom">
          <button type="submit" class="search-btn">
            Search
          </button>
        </form>
          
        </div>
      </div>
    <div class="menu">
      <div class="container">
        <ul>
          <li class="active">Top Stories</li>
          <li>World</li>
          <li>Business</li>
          <li>Technology</li>
          <li>Entertainment</li>
          <li>Sports</li>
          <li>Science</li>
          <li>Health</li>
        </ul>
      </div>
    </div>  
    <div class="main">
      <div class="container">
        <div class="row">
          <div class="col-md-5">
            <p>
              October 1, 2016
            </p>
            <h2>
              <span>Introducing Bass</span>
            </h2>
            <p>
              A new app by the creators of Shutterbugg that lets you enjoy your favorite music everywhere you go.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="supporting">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <h3>
              Latest News
            </h3>
            <p>
              October 1, 2016
            </p>
            <h4>
              <span>MOVE launches in london</span>
            </h4>
            <p>
              October 1, 2016
            </p>
            <h4>
              <span>MOVE launches in london</span>
            </h4>
            <p>
              October 1, 2016
            </p>
            <h4>
              <span>MOVE launches in london</span>
            </h4>
          </div>
          <div class="col-md-4 sidebar">
            <h3>
              Upcoming Events
            </h3>
            <p>
              October 1, 2016
            </p>
            <h4>
              <span>MOVE launches in london</span>
            </h4>
            <p>
              October 1, 2016
            </p>
            <h4>
              <span>MOVE launches in london</span>
            </h4>
            <p>
              October 1, 2016
            </p>
            <h4>
              <span>MOVE launches in london</span>
            </h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/newsroom/ad.jpg">
          </div>
          
        </div>
      </div>
       
    </div>
    <div class="footer">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <ul>
              <li>About</li>
              <li>Terms</li>
              <li>Send Feedback</li>
            </ul>
            </div>
          <div class="pull-right">
            <p>
               2014 Newsroom
            </p>
            </div>  
          
        </div>
      </div>
    </div>

  </body>
</html>

html, body {
  margin: 0;
  padding: 0;
}

.header {
  height:100px;
  padding-top:30px;
}
.container {
  width:800px;
}

.header {
  background-color: #000;
}

.menu {
  background-color: #152230;
  min-height: 40px;
  margin-bottom: 0px;
  
}

form {
  float:right;
}

.search-form input {
  background-color: transparent;
  border: 0px;
  border-bottom: 1px solid white;
  color:white;
}

.search-form button {
  background-color: transparent;
  border: 0px;
  color: white;
  border-bottom: 1px solid #1a77ff;
}

.menu li {
  display: inline;
  color: white;
  padding-top: 10px;
  padding: 5px;
  text-align: center;
  line-height: 40px;
}

.active {
  background: #1a77ff;
}

.main {
  background: url(https://s3.amazonaws.com/codecademy-content/projects/newsroom/bass-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  color: white;
  background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
  height:500px;
  margin-top: 0px;
}

.main .col-md-5 p {
  font-size: 16px;
  padding: 10px;
}

.main .col-md-5 h2 {
  font-size: 60px;
 
}

span {
   border-bottom: 5px solid #1a77ff;
}

.supporting .row .col-md-8 {
  background-color: #fff;
  padding: 20px 40px 40px 40px;
}

.supporting .row .col-md-4 {
background-color: #152230;
  padding: 20px 40px 40px 40px;
}

img {
  vertical-align: middle;
  width: 100%;
}

.supporting .row {
  margin: 50px 0px;
}

.footer li {
  display: inline;
  padding: 0px 5px;
}

.footer p {
  float: right;
}

#2

i recommend to go here, and read about the grid system a bit more, learn about col-xs and col-sm, which are for mobile and tablet devices. That should improve your understanding, allowing you to make a responsive website


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.