Error aligning divs in a responsive webpage

Question

I have a problem with the alignment of two divs. I'm using bootstrap for a responsive page.

This is the image on desktop

This is the image on mobile

It's like the image isn't adjusting itself with the container div and just staying in the original position.

this is the HTML code:

     <div class="Guy">
         <div  class="img_guy">
            <img src="./images/profile1.png" class="img-circle img-responsive">
       </div>

            <div  class="Content">
            <h1 class="tagline">JAMES H. MAYER, ESQ.</h1>
             <br> 
            <h2 class="tagline">San Diego's "Top Lawyers" (Mediation)</h2>
            <h2 class="tagline">San Diego Magazine 2012-2015" (Mediation)</h2>
            </div>
        </div>

This is the CSS code:

    .Guy {
    margin:  2% auto;
    float:left;
      max-width: 800px;
      overflow:hidden;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .5);
      box-shadow: 0 0 8px rgba(0, 0, 0, .8);
      border-radius: 112px;
    }

    .img_guy {
     float:left;
      width:40%;
      height:64%;  
    }

    .Content {
         float:left;
         width: 45%;
         height:60%;
    }

    .Content h1 {
      color: #E4A500;
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 100%;
    }

    .Content h2 {
      color: #e1e8f0;
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 90%;
    }

Any hint that may be causing this?

Answer 1

Here's an example of how this could be done so it keeps a highly responsive nature from mobile up.

See example Snippet at Full page then reduce your browser.

#guy {
  background: url('http://www.getitdonecleaning.co.uk/wp-content/uploads/2013/11/office-cleaning-fife.jpg') center center no-repeat;
  background-size: cover;
  color: white;
}
.people-list {
  max-width: 600px;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 112px;
}
.profile,
.details {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}
.details h2 {
  color: #E4A500;
  font-size: 150%;
  margin: 15px auto;
}
.details h3 {
  color: white;
  font-size: 100%;
  margin: 10px auto;
}
@media (max-width: 480px) {
  .profile img {
    height: 150px;
  }
  .people-list {
    max-width: 100%;
  }
  .profile,
  .details {
    margin-right: 2px;
    margin-left: 2px;
  }
  .details h2 {
    font-size: 120%;
  }
  .details h3 {
    font-size: 90%;
  }
}
@media (max-width: 360px) {
  .people-list {
    border-radius: 0;
  }
  .profile,
  .details {
    display: block;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron" id="guy">
  <div class="container">
    <h1>Some other Title Here</h1>

    <div class="people-list">
      <div class="profile">
        <img src="http://lorempixel.com/200/200/people" class="img-circle" />
      </div>
      <div class="details">
        <h2>JAMES H. MAYER, ESQ.</h2>

        <h3>San Diego's "Top Lawyers" (Mediation)</h3>

        <h3>San Diego Magazine 2012-2015" (Mediation)</h3>

      </div>
    </div>
  </div>
</div>

Update

As far as the structure goes: using a jumbotron in this instance makes sense since you're using Bootstrap (it takes care of your H1 and background for the most part), then placing all your elements inside a div to create a space for your image and text (.people-list) so you can set margin/padding/width etc independently of the objects enclosed within.

For the image/text inside using display:table-cell will do just that, it will treat those elements like s along with vertical-align so everything is centered inside your main div.

The rest comes down to using media queries to adjust all the sizes to your image/text isn't crushed together and remains readable and user friendly. (Note: I also took the chance to refactor this somewhat as I had some duplicate/unnecessary rules.)

Sidenote: Why I changed the display to block under 360px. There are many devices (namely iPhone 4/5) that have a CSS width of 320px. Trying to display the image and text side-by-side on a small screen isn't ideal for many reasons.

*See image and Example Snippet by re-sizing your browser. And test on actual devises, this can't be stressed enough.

Unchanged display property: to be viewed down to 320px (*You may need to use Firefox if you use a desktop)

And please note, there is no display: row property: See MDN

#guy {
  background: yellow;
  color: white;
}
.people-list {
  max-width: 600px;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 112px;
}
.profile,
.details {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}
.details h2 {
  color: #E4A500;
  font-size: 150%;
  margin: 15px auto;
}
.details h3 {
  color: white;
  font-size: 100%;
  margin: 10px auto;
}
@media (max-width: 480px) {
  #guy {
    background: teal;
  }
  .profile img {
    height: 150px;
  }
  .people-list {
    max-width: 100%;
  }
  .profile,
  .details {
    margin-right: 2px;
    margin-left: 2px;
  }
  .details h2 {
    font-size: 120%;
  }
  .details h3 {
    font-size: 90%;
  }
}
@media (max-width: 360px) {
  #guy {
    background: lightblue;
  }
  .people-list {
    border-radius: 0;
  }
}
@media (max-width: 320px) {
  #guy {
    background: red;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron" id="guy">
  <div class="container">
    <h1>Some other Title Here</h1>

    <div class="people-list">
      <div class="profile">
        <img src="http://lorempixel.com/200/200/people" class="img-circle" />
      </div>
      <div class="details">
        <h2>JAMES H. MAYER, ESQ.</h2>

        <h3>San Diego's "Top Lawyers" (Mediation)</h3>

        <h3>San Diego Magazine 2012-2015" (Mediation)</h3>

      </div>
    </div>
  </div>
</div>