Shutterbugg footer spacing


#1

Hey ya'll! So I'm on my finishing touches and can not figure out how to adjust the spacing on my footer. Am I supposed to adjust the padding or margins on the column itself or the text? I tried both and nothing seems to work.

-------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">
  </head>
  <body>
    <!-- The main section -->
    <div class="main">
      <div class="container">
        <h1>Introducing Shutterbug</h1>
        <h3>Capture the moments that matter.</h3>
        <a href="#">Download Shutterbugg</a>
      </div>
    </div>

    <!-- The first section div -->
    <div class="section">
      <div class="container">
        <div class="row">
  				<div class="col-md-6">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png" alt="railroad"/>
          </div>
 					<div class="col-md-6">
    				<h1>Share</h1>
    					<h3>Share your moments with the people that matter to you most. With Shutterbug, its easy to share with the right people.</h3>
  				</div>
				</div>

      </div>
    </div>

    <!-- The second section div -->
    <div class="section">
      <div class="container">
				<div class="row">
  				<div class="col-md-6">
            <h1>Explore</h1>
            <h3>Explore moments from your friends and family. Shutterbug makes it easy to see what's happening in the world and take in everything around you.</h3>
          </div>
  				<div class="col-md-6">
            <img id="pic2" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png" alt="mountain side"/>
          </div>
				</div>
      </div>
    </div>

    <!-- The third section div -->
    <div class="section">
      <div class="container">
        <div class="row">
  				<div class="col-md-6"><img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/save.png" alt="university"/></div>
  				<div class="col-md-6">
             <h1>Save</h1>
            <h3>Save every photo you take. Shutterbugg auntomatically saves your photos so you can show them off from anywhere.</h3>
          </div>
				</div>
      </div>
    </div>

    
    <div class="store section container">
      <h2>Available for iPhone, iPad, and Android.</h2>
      <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="185px" />
      <img alt="Get it on Google Play" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="159px" />
    </div>

    <!-- The footer div -->
    <div class="footer">
      <div class="container">
        <div class="row">
  				<div id="company" class="col-md-4">
    				<h6>Company</h6>
     				 <ul>
        			<li>Careers</li>
       				<li>Terms</li>
        			<li>Help</li>
    				 </ul>    
          </div>
  				<div id="products" class="col-md-4">
          	<h6>Products</h6>
    					<ul>
      					<li>Shutterbugg</li>
     						<li>Speakerboxx</li>
   			 			</ul>
          </div>
  				<div id="news" class="col-md-4">
          	<h6>News</h6>
            	<ul>
              	<li>Blog</li>
              	<li>Twitter</li>
              	<li>Youtube</li>
              	<li>Google+</li>
              	<li>Facebook</li>
           	 	</ul>
          </div>
				</div>
      </div>
    </div>

  </body>
</html>-------CSS--------
.container {
  max-width: 928px;
}

h1, h2, p, a {
  font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;
}

h1 {
  font-size: 64px;
  font-weight: 100;
  margin-bottom: 25px;
}

h3{
  margin-bottom:45px;
  font-weight:lighter;
}

a {
  background-color:rgba(238,68,95,0.9);
  color:white;
  font-size:18px;
  font-weight: 200;
  text-decoration:none;
  padding:8px 30px 8px 30px;
  border-radius:5px;
  
  
}

.main {
  height: 550px;
  padding-top: 55px;
 background:url(https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg);
}

.main p {
  font-size: 26px;
  font-weight: 200;  
  margin-bottom: 40px;
}

.section .row {
  padding-top: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid #dbdbdb;
}

.row h3{
line-height:40px;  
width:380px;
}

.row #pic2{
  padding-left:90px;
}

.store {
  text-align: center;
  border-bottom: 0px;
  padding-bottom:100px
}

/*footer*/

.footer {
  border-top: 1px solid #dbdbdb;
  background-color: #f3f3f3;
  padding: 20px 0px 80px;
}

.footer .col-md-4 {
  float:left;
  padding:20px;
  
}

.footer #company{
  
}

.footer #products{
  
}

.footer #news{
  
}

.footer h6 {
  color:#555555;
  font-size:16px;
}

.footer ul {
  list-style-type: none;
  padding-left:0;
  
}

.footer li {
  color: #999;
  font-weight: 600;
  
  
}

@media (max-width: 500px) {
  .col-md-6 img {
    padding: 50px;
    width: 100%;
  }
}

#2

Hi Josie,

Here is how your footer looks to me using the code that you've supplied:

What did you have in mind for the finished spacing?


#3

I desire for it to look as much like the example given for the project. So mostly shifting the second and third column to the left and decreasing the space between them.


#4

Okay, so remember that Bootstrap is giving you a 12 column grid to work with. If you choose to use the col-md-4 class as you have done, that means that you are giving each of your footer columns 4 of those 12 grid columns. So the first footer column gets 1-4 of the grid, the second gets 5-8, and the third gets 9-12.

If you want them to have less than 4 then change the 4 in your col-md-4 class name.


#5

So there is no way to manipulate the space between the columns without
changing the type of column I'm using?


#6

I'm sure you could find all the CSS rules that make up the col-md-4 class and change them but why would you not want to take advantage of the already existing Bootstrap classes?

If you really are curious about changing the default CSS instead of just using a different class, you can follow the bootstrap link that you have in your index.html file, you will see all the CSS that Bootstrap is using to make your pages. It is hard to read because it is minified, but if you really want to see it more clearly, you would load it into a beautifier, like http://jsbeautifier.org/. Then you would search through looking for anything that affects the col-md-4 class. Then you could put your changes in your style.css file. Because your columns are inside divs with class row and class container, you may find that those also are affecting their spacing.

You can read more about it here:
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

Now you know all about this and you have your choice. Find and change the col-md-4 CSS as described above or do as I originally was encouraging you to do and try a different column width, maybe col-md-3 or col-md-2.


#7

Ooook. Got it! I think i'll change the class. Thank you!


#8

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