CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Alan Tingey
Alan Tingey

Reputation: 961

CSS: Image pokes out of Bootstrap panel

I have the following:

{% block content %}
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading">
            <h2 class="panel-title">{{ article.headline }}</h2>
            <br/><h2 class="panel-title">{{ article.date|date:"l jS F Y" }}</h2>
        </div>
        <div>
          {% if article.image %}
            <img src="{{ MEDIA_URL }}{{ article.image }}" class="article-image pull-right img-responsive col-md-· col-sm-6 col-xs-12" alt="{{ article.headline }}" />
          {% endif %}
          {{ article.text|safe }}
        </div>
      </div>
    </div>
  </div>
{% endblock %}

And the image currently sticks out the bottom of the panel and makes it looks ever so odd.

The css for article image is simply:

.article-image {padding: 0; margin-bottom: 20px;}
@media(min-width: 768px){.article-image {margin-left: 20px;}}

Can anyone help understand why the image does not fit snugly within the panel?

Many thanks, Alan.

Upvotes: 0

Views: 115

Answers (1)

Damian Dominella
Damian Dominella

Reputation: 620

Try to put your panel content inside a div class="panel-body" and give the image dimensions. Something like this

{% block content %}
<div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading">
            <h2 class="panel-title">{{ article.headline }}</h2>
            <br/><h2 class="panel-title">{{ article.date|date:"l jS F Y" }}</h2>
        </div>
        <div class="panel-body">
          {% if article.image %}
            <img src="{{ MEDIA_URL }}{{ article.image }}" class="article-image pull-right img-responsive col-md-· col-sm-6 col-xs-12" alt="{{ article.headline }}" />
          {% endif %}
          {{ article.text|safe }}
         </div>
        <div>
      </div>
    </div>
    </div>
</div>
{% endblock %}

CSS

.article-image {
    padding: 0; 
    margin-bottom: 20px;
    width: 50px; //whatever you want
    height: 50px; //whatever you want
}
@media(min-width: 768px){
    .article-image {
        margin-left: 20px;
    }
}

Upvotes: 2

Related Questions