Change image dimensions on recent posts feed?

[thenamesian]

Hi, I want to change the image dimensions (or ratio) to be perfectly square on my homepage’s recent posts feed on my website at http://commercialdrones.fm/. You can see that the normal post feed’s images are cropped on top and bottom but I want them all to be perfect squares.

What’s the CSS code to do that? Or is there something I need to modify in PHP file?

Thanks!
Ian

[paul.r]

Hi Ian,

To make it square, you can add the code below in Theme Options > CSS

.blog a.entry-thumb {
   background-size: contain;
   width: 240px;
   height:240px;
}

Hope that helps.

[thenamesian]

Ah, that actually does help but it forces all of my feed thumbnails to be square, even the “featured” ones with big and skinny style. Is there any way to only apply that to just the “normal” thumbnails? Please see screenshot below.

Also, when making the thumbnails square, it made a large margin of white space between the image and the start of the title and text preview. Can I use any CSS to close that margin to bring the text closer to the image?

Thank you!

[jade]

Hi there,

Please updatethe code to:

.blog a.entry-thumb:not(.skinny):not(.big){
   background-size: contain;
   width: 240px;
   height:240px;
}

Hope this helps.

[thenamesian]

Amazing, thank you! Last thing is reducing the margin between the thumbnail and the title and text excerpt preview as shown here:

Any way to do that with CSS?

[jade]

Hi Ian,

Please try to add this code:

.blog .x-main .hentry>.entry-featured {
    width: 25%;
}

.blog .x-main .hentry.has-post-thumbnail>.entry-wrap {
    width: 75%;
}

Hope this helps.

[thenamesian]

That worked but I just checked my responsiveness on mobile and unfortunately it’s totally screwed up:

Any ideas?

[paul.r]

Hi,

Please add this code as well.

@media(max-width:1550px) {
.blog a.entry-thumb:not(.skinny):not(.big) {
   width:100% !important;
   height:auto !important;
}
}

Hope that helps.

[thenamesian]

Very helpful and we’re now very close but not quite there yet. Looks like the image shrinks down to a very tiny size when on smaller screens now:

Is there any code to make the image stay larger on those smaller sized screens? As soon as you go smaller than a normal desktop screen, the image size becomes responsive but keeps shrinking until it’s too small to even see.

[jade]

Hi there,

Please add this code in the custom CSS:

@media (max-width: 767px) {
    .blog .x-main .hentry>.entry-featured {
        width: 100%
    }

    .blog a.entry-thumb:not(.skinny):not(.big) {
        padding-bottom: 100%;
    }
}

Hope this helps.

[thenamesian]

Ok, that helps for now but there is still some very odd resizing behavior. I’m assuming I’d been a lot of tweaking to get this right at each screen size.

[ruenel]

Hello There,

To resolve your issue, you must have this code replaced:

.blog a.entry-thumb:not(.skinny):not(.big){
   background-size: contain;
   width: 300px;
   height:300px;
}

.blog .x-main .hentry>.entry-featured {
    width: 25%;
}

.blog .x-main .hentry.has-post-thumbnail>.entry-wrap {
    width: 72%;
}

@media(max-width:1550px) {
.blog a.entry-thumb:not(.skinny):not(.big) {
   width:100% !important;
   height:auto !important;
}

You will be using this code instead:

.blog a.entry-thumb:not(.skinny):not(.big){
   background-size: contain;
   max-width: 300px;
   height:300px;
}

.blog .x-main .hentry>.entry-featured {
    width: 25%;
}

.blog .x-main .hentry.has-post-thumbnail>.entry-wrap {
    width: 75%;
}

@media (max-width: 1550px){
  .blog a.entry-thumb:not(.skinny):not(.big) {
    width: 100% !important;
    height: auto !important;
    background-size: auto 100%;
    background-position: top center;
    min-height: 225px;
  }
}

Hope this helps. Please let us know how it goes.

[thenamesian]

Good enough! It does crop some of the images a bit in the weird screen sizes but honestly, much better. Thank you! We can mark this as resolved.

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.