How to make Featured Image previews Square

Support
#1

Hello Team, Looking to make the featured images on my blog square instead of landscape. Can you please assist? Thank you!

Also, how do I make the “Recent Posts” widget in Cornerstone display as square instead of Landscape?

1 Like
#2

Hi There,

Please add the following code under Customizer > Custom > Global CSS:

.blog a.entry-thumb,
.home .x-recent-posts-img {
    background-size: contain !important;
}
#3

Thanks team. I made the change, but it makes the square quite small. Is there a way to make the featured image size like…400x400 or something? Thanks!

#4

Also, the Recent Posts feature on the Homepage still shows the featured Images as rectangle.

#5

Sorry for the confusion. It’s technically possible to make Recent Post featured image a square but it would require more than CSS customization. For that, you’ll need to consult with a web developer.

You might want to use Essential Grid or The Grid plugin to showcase your posts instead as they have more display options. Please see the links below for more details.


Thanks.

#6

Thank you for that. Just wondering if there was a way though to make featured image previews on the blog page square but a larger size, like 400X400px or something? Thanks!

#7

Hi again,

You may try adding the following code in your Customizer:

@media screen and (min-width: 768px) {
    .blog .x-main .hentry.has-post-thumbnail>.entry-wrap, .search .x-main .hentry.has-post-thumbnail>.entry-wrap, .archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
        float: right;
        width: calc(100% - 400px);
        padding-left: 35px;
    }
    .blog .x-main .hentry>.entry-featured {
        width: 400px;
    }
    .blog .x-main .hentry>.entry-featured a {
        width: 400px;
        height: 400px;
    }
}

Hope this helps!