user3117275 user3117275 - 1 month ago 8
CSS Question

Wordpress Blog Main Page CSS Issue

I'm trying to set blog post featured image size to be consistent on the main blog page.

I tweaked this code:

HTML:

<div class="featured-image-excerpt">
<img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post.png" alt="infographic-7-blog-post" srcset="http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post.png 2480w, http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post-98x300.png 98w, http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post-768x2341.png 768w, http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post-336x1024.png 336w" sizes="(max-width: 2480px) 100vw, 2480px" width="2480" height="7558">
</div>


CSS

.attachment-post-thumbnail {
height: 460px;
width: 100%;
}


But now, as you can see from visiting the page, the infographic featured image gets squished on the main blog page.

What I'd like to do is have the image cut-off at 460px, not for it to get squished to fit into 460px (for the main blog page). In other words, the featured image excerpt should be cut-off at 460px.

Why is this not working? What would?

Thank you in advance.

Answer

A possible CSS only solution would be to set the dimensions you've given to the image to the wrapper div instead and set overflow: hidden; to cut off the image, e.g.:

.featured-image-excerpt {
    height: 460px;
    width: 100%;
    overflow: hidden;
}
.attachment-post-thumbnail {
    width: 100%;
}

With removing the height from your image rule it should work.