Question

I have the following html-

 <div class="container">
  <h1 class="page-header" id="property_head">A cool title</h1> 
  <div class="row text_img">
    <div class="span9">
      <div class="row">
        <div class="span3" id="activity"><img src="http://some/img.png"></div>
        <div class="span5" id="activity_text"><h3 class="text_title">Great Title</h3><br><p class="lead">Foo</p></div>
      </div>
    </div>  
  </div>
 </div>

and the following css-

.text_img {
  padding: 30px;
  margin-bottom: 30px;
  margin-left: 100px;

}

#activity {
  float: left;
  margin-right: 30px;
}

#activity_text {
  float: right;
  border:1px solid black;
}

I’m using bootrap for container page-header row and span3/5. When I resize the browser below for ex 300px #activity_text positions itself underneath #activity which is what I want.

I’m using media queries and I would like when the breakdown of the text positioning itself beneath the img, for the img to center above the text and remain that way for all width’s below (using a media query).

After trying multiple approaches I am unsure of the CSS to make this work. Thanks for your atteniton. Take a look at the attached.

NOTE: Changing the colors of the background to help notice the media query breakpoints

Answer 1

At the specific media query you’ll just have to remove any floats, give it a width & margin:auto. e.g. at your desired media query max-width:

#activity {
    float:none;
    width:50%; /* or whatever you want it to be */
    margin:auto;
}

Depending how Bootstrap CSS is setup you may have to add !important to one or all of the CSS above to make sure it does what you want it to do at that media query point.

Also I wasn’t sure if the activity_text automatically went underneath at that point, so here’s the CSS you would need at the same media query for that to work:

#activity_text {
    float:none;
    width:100%;
}