Change blog post image size

[billy.rooney]

Hi,

I was searching the forum for a solution to an issue where the blog post featured images were far too big, and I was looking to reduce their size.

I found the below CSS, which reduces the amount of screen that the posts take up, which was a good solution.

But now it appears that the CSS has affected the blog page itself, which is not what I’m after. Would you know how to keep the blog page the normal breadth, but have the posts restricted in size?

@media (min-width: 1024px) {
.post, .x-comments-area {
max-width: 60% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}

Thanks a million.

[mldarshana]

Hi Billy,

To target featured image of your single posts, you can use the following CSS rule and add it into your X -> Theme Options -> CSS area.

.single-post .entry-featured {
    width: 50%;
    margin: 0 auto;
}

If you need to apply it to different screen widths, you can do that as well.

@media (min-width-767) {
  .single-post .entry-featured {
    width: 50%;
    margin: 0 auto;
  }
}

You can learn more about media queries from the following resource (https://css-tricks.com/css-media-queries/).

Hope that helps.

[billy.rooney]

That’s great, thank you for your reply. With that CSS is it possible to have a bit of padding below the image?

For the below code, is it possible to have it apply to only the posts and not the posts page itself?

@media (min-width: 1024px) {
.post, .x-comments-area {
max-width: 60% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}

[paul.r]

Hi @billy.rooney,

1. To add a space below the image, yuo can change the code to this.

.single-post .entry-featured {
    width: 50%;
    margin: 0 auto 30px;
}

You may change 30px to adjust

2. You can change the code to this

@media (min-width: 1024px) {
.blog .post, 
.blog .x-comments-area {
max-width: 60% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}

Hope that helps

[billy.rooney]

@paul.r

.single-post .entry-featured {
width: 50%;
margin: 0 auto 30px;
}

That’s brilliant, thank you so much for your swift response !

[thai]

You’re welcome.