Project: Newsroom - image sizing and formatting main section

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:


<!DOCTYPE html>
    <link rel="stylesheet" href="">
  <link rel='stylesheet' href='style.css'/>
    <link href="" rel="stylesheet" type="text/css">
    <link href=",400,700" rel="stylesheet" type="text/css">
    <div class="header">
      <div class="container">
        <img src="" 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>
    <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>
      </div><!--menu container-->
    <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><!--main container-->



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 */
  background-color: #000;
  padding: 18px 0 18px 0;
  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;   
  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{
  background-color: #1a77ff;
.menu li a:hover{
  background-color: #1a77ff;
  background-image: url(;
  color: #fff;
  background-size: cover;
  height: 500px;
.main .col-md-5{
   margin-left: 90px;
  margin-top: 30px;

.main .col-md-5{
  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;

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

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.

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

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.

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