0

I am using a theme called Simple Bootstrap and after a recent update, the theme began cropping the height of the featured images on both the index and the post page. When I inspect the specific element for the image I get this (I'm including the div that encloses it):

<div class="featured-image">
  <a href="http://listen.undertheguntheater.com/index.php/podcast/s2-e4-down-will-come-or-nobody-can-catch-a-break-on-this-show/" title="S2 E4 &#8211; Down Will Come or Nobody Can Catch A Break On This Show">
    <img src="http://i0.wp.com/listen.undertheguntheater.com/wp-content/uploads/2015/06/Under-The-Gun-Presents-11.png?resize=1140%2C488" class="attachment-simple_boostrap_featured wp-post-image" alt="Under The Gun Presents (1)" />
  </a>
</div>

And I think the relevant CSS is:

.featured-image img {
  width: 100%;
  height: auto;
}

Is there something I can add to the theme's CSS that will correct this and show the full height of the image? I tried adding this to the CSS and while it did override it, it didn't fix the image:

.featured-image img {
  height: 100%;
}

You can view the page and inspect it here: http://listen.undertheguntheater.com/

0

This is likely a tweak the theme author made to make the images in the theme responsive or adaptive. You may want to look at adding "min-height" to your CSS and this should address your problem.

https://css-tricks.com/almanac/properties/m/min-height/

Also another thing to note if you using "100%" anything the actual dimension is governed by the parent element (whether is width or height).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.