Project: Newsroom - image sizing and formatting main section


#1

Hi. I have been having some problems with the newsroom project.

  1. I don't know how to move my image in the main section so that it is like in original (the headphones are cut off at the botom).

  2. When I make my page smaller (phone size) it does not shrink very well.

I'm not quite sure the terminology of these things so hope I can be understood.

Here is my code:

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
  <link rel='stylesheet' href='style.css'/>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="header">
      <div class="container">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/newsroom/logo.svg" width="210" height="50"/>
        <div class="search">
          <form class="search-form">
            <input placeholder="Search Newsroom" type="text">
            <button type="submit" class="search-btn">Search</button>
          </form>
        </div>
      </div>
    </div>
    <div class="menu">
       <div class="container">
        <ul class="nav">
          <li class="active"><a href="#">Top Stories</a></li>
          <li><a href="#">World</a></li>
          <li><a href="#">Business</a></li>
          <li><a href="#">Technology</a></li>
          <li><a href="#">Entertainment</a></li>
          <li><a href="#">Sports</a></li>
          <li><a href="#">Science</a></li>
          <li><a href="#">Health</a></li>
        </ul>
      </div><!--menu container-->
    </div><!--menu-->
    <div class="main">
      <div class="containter">
        <div class="row">
          <div class="col-md-5">
            <p class="date">November 7, 2014</p>
            <h2><span>Introducing Bass</span></h2>
            <p>A new app by the creators of Shutterbug that lets you enjoy your favorite music everywhere you go.</p>
          
          </div>
        </div><!--row-->
      </div><!--main container-->
    </div><!--main-->

  </body>
</html>

CSS

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;font-family: 'Lato', sans-serif;
  font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Header */
.header{
  background-color: #000;
  padding: 18px 0 18px 0;
}
.search{
  float: right;
  padding-top: 15px;
  padding-left: 40px;
}
.search-form input{
  color: #fff;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ffffff;
  height: 30px;
  width: 240px;
}
.search-form input:hover, .search-form input:focus {
  border-color: #1a77ff;
}
.search button{
  color: #fff;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #1a77ff;
  height: 30px;
  font-weight: 300;
   margin: 0 0 0 10px;   
}
/*Menu*/
.menu{
  background: #152230;
  width: 100%;
 color: #fff;
  text-decoration: none;
  
 
}
.menu ul.nav{
  list-style: none;
  padding-top: 5px;
  padding-bottom: 5px;
   
}
.menu ul.nav li{
  display: inline-block;  
}

.menu ul.nav li a {
  color: #fff;
}
.menu ul.nav li.active{
  background-color: #1a77ff;
}
.menu li a:hover{
  background-color: #1a77ff;
}
/*main*/
.main{
  background-image: url(https://s3.amazonaws.com/codecademy-content/projects/newsroom/bass-bg.jpg);
  color: #fff;
  background-size: cover;
  height: 500px;
  
}
.main .col-md-5{
   margin-left: 90px;
  margin-top: 30px;

}
.main .col-md-5 p.date{
  font-size: 16px;
}
.main .col-md-5 h2{
  font-size: 60px;
  
}
.main .col-md-5 h2 span{
  
  border-bottom: 5px solid #1a77ff;
}


.main .col-md-5 p{
  font-size: 20px;
}

#2

you mean the background image? You can read about background here: mdn - background

csstricks also has a nice article about it: css-tricks - full background image

col-md is only for screens larger then 992px, if you want smaller screens to maintain the grid, use col-xs and col-sm you can read about it here: bootstrap - css


#3

Thank you. I will check these out. However, I am not sure if I described my problem right.

I want to adjust which part of the image is shown.

THe example is this:

but mine is this

as far as the second problem. When I shrink the screens they look different.

the example is this

but in mine the words are cut off.


#4

background is exactly what you need, under background there is background-position for example, which you can use to position the image. or background-size to manipulate the size, you can through all the individual property's on the documentation i provided.

background is just a shorthand to combine background-image, background-size and more into a single css property. just read the documentation, you will see it is exactly what you need


#5

Thank you. I added a background-position of 0px -100px; and that sorted it out.

Going to look into the other problem now. The example doesn't see to use the col-xs or col-sm but still is fine when i squish the screen.


#6

good to hear :slight_smile:

of course it can still look fine, but col-xs and col-sm can make it look even greater given you can keep the grid structure intact on smaller screens the way you like