Shutterbugg: the bootstrap grid is creating vertical rows instead of horizontal ones


#1

I need help with this project
my page is displayed vertically which means the img above the text not next to it

>   <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"/>
>           </div>
>           <div class="col-md-6">
>             <h1>Share</h1>
>             <p>Share your moments with the people who matter to you most. With Shutterbugg, it's easy to share with the right people.<p>
>           </div>
>         </div>
>         <div class="row">
>           <div class="col-md-6">
>             <h1>Explore</h1>
>             <p>Explore moments from your friends and family. Shutterbugg makes it easy to see what's happening in the world and take in everything around you.<p>
>           </div>
>           <div class="col-md-6">
>             <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png"/>
>           </div>
>         </div>
>         <div class="row">
>           <div class="col-md-6">
>             <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png"/>
>           </div>
>           <div class="col-md-6">
>             <h1>Save</h1>
>             <p>Save every photo you take. Shutterbugg automatically saves your photos so you can show them off from anywhere.<p>
>           </div>
>         </div>
>       </div>
>     </div>

#2

Can you share your CSS as well? Probably something in there...


#3

Hi
I obtain exactly the same problem: instead of having 2 columns, I get the picture above the text. When I inspect the page I get, I see that the whole width of the container is allocated to the picture as well as to the text, instead of the half of the width. The interesting parts of my CSS file are:

.container {
max-width: 928px;
}

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

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


#4

I just found the solution: before I had "row-md-6", which I changed to "col-md-6" and now it is working for me. I see that you already have "col-md-6", so I do not understand why it does not work for you.


#5

Hi elkommy
Your code worked fine when I tried it, I think the problem might be that you didn't widen the browser window enough so the images appear to be above the texts, just my 2 cents..

regards


#6

This is my CSS sheet

.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: 20px;
}

a {
  font-size:18px;
  font-weight: 200;
}

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

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

.main .btn {
  background: rgba(238,68,95,0.9);
  color: #fff;
  font-size:18px;
  font-weight: 200;
  padding: 8px 30px;
  text-transform: none;
  display: inline-block;
}

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

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

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

.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%;
  }
}