CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Carpetfizz
Carpetfizz

Reputation: 9169

Resizing issue when displaying image adjacent to text

I'm having some trouble with displaying an image next to text using Twitter Bootstrap. I have the following HTML code:

    <div class="panel panel-primary panel-projects">
       <div class="panel-heading">
          <h3 class="panel-title">Marijuana, Beer, and Wine Markets</h3>
       </div>
       <div class="panel-body">
          <div class="row">
             <img class="project-image col-md-4 center-block img-responsive" src="/images/project_wine.jpg"></img>
             <p class="body-text col-md-8">
My content
             </p>
          </div>
       </div>
    </div>

And the following CSS:

.panel-projects {
    margin: 35px;
}

.panel-body{
    min-height: 235px;
}

.body-text{
    font-size: 16px;
    margin: 5px;
}

.project-image{
    width: 300px;
    height: auto;
    text-align: center;
}

When the screen is full sized, the result is as expected: (W: 1366)

enter image description here

However, when the screen size is reduced just a little bit, there's this stacking issue (W: 1199)

enter image description here

After resizing down a little bit more, I get this - which looks fine (W: 991)

enter image description here

How can I get the third style to trigger sooner, so that the awkward stacking layout doesn't occur?

Upvotes: 0

Views: 67

Answers (4)

vanburen
vanburen

Reputation: 21663

You should have your columns separate from the other classes your're adding: use the columns by surrounding your content.

  • You also have a closing img tag which isn't necessary. <img />

    col-md-4 img

    col-md-8

See example Snippet.

.panel-projects {
  margin: 35px;
}
.panel-body {
  min-height: 235px;
}
.body-text {
  font-size: 16px;
  margin: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel panel-primary panel-projects">
    <div class="panel-heading">
      <h3 class="panel-title">Marijuana, Beer, and Wine Markets</h3>

    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-4">
          <img class=" center-block img-responsive" src="http://placehold.it/300x300" />
        </div>
        <div class="col-md-8">
          <p class="body-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the
            1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
            into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
            versions of Lorem Ipsum.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

dattebayo
dattebayo

Reputation: 1402

Remove margin from "body-text" as margin will also count in CSS Box-Model. Instead use padding.

.body-text{
    font-size: 16px;
    padding: 5px;
}

Upvotes: 0

Lakhan
Lakhan

Reputation: 13276

You will try this might be this will resolved your issues.

You can add image in p tag before content start : Like that way 

<div class="row">
             <p class="body-text col-md-8">
<img class="project-image col-md-4 center-block img-responsive" src="/images/project_wine.jpg"></img>
My content
             </p>
          </div>

Upvotes: 0

Nick De Beer
Nick De Beer

Reputation: 5272

Rather use col-lg instead of col-md

<img class="project-image col-lg-4 center-block img-responsive" src="/images/project_wine.jpg"></img>
<p class="body-text col-lg-8">

I posted your code here: http://jsfiddle.net/6xq7omfp/

Upvotes: 1

Related Questions