Is there a way to make the featured image on the blog post not so big?

[rick4him]

Is there ea way I can make the image not be so huge on my blog posts? https://hopestory.org/world-down-syndrome-day-united-nations-2019/

[Prasant]

Hello Rick,

Thanks for reaching out.

You can add following CSS under X > Theme Options > CSS:

.entry-thumb img {
    min-width: 70%;
    width: 70%;
    margin: 0 auto;
    display: block;
}

.entry-featured {
    border: 0; /*remove border*/
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[rick4him]

@Prasant

.entry-thumb img {
min-width: 70%;
width: 70%;
margin: 0 auto;
display: block;
}

.entry-featured {
border: 0; /remove border/
}

Thanks. I just updated it…do you think they should be a bit wider (maybe to match the content area of the text?)

[thai]

Hi Rick,

In this case, please remove the previous CSS and add this custom CSS instead:

.single-post .entry-featured {
    padding: 0 10%;
}

Hope it helps

[rick4him]

@thai

.single-post .entry-featured {
padding: 0 10%;
}

Thank you, an odd boarder by the image? Can you please take a look?

Thanks.

[mldarshana]

Hi Rick,

I have checked the referenced URL but I do not see any border on the image.

I have also checked the CSS applied to the image, and the border is set to zero.

Please make sure to clear all caches when testing your page again (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

If you’re still having issues, please provide us with a screenshot and also mention on which browser you see this issue.

Thanks!

[rick4him]

I removed your code because the image wasn’t showing up correctly. Also the images now are currently very small on mobile both on the main blog page and the blog posts.

[mldarshana]

Hi Rick,

Can you please try using the following CSS rule instead, and see if that helps.

@media (min-width:767px){
  .single-post .entry-featured {
    max-width: 60% !important;
    margin: 0 auto;
    border: none;
  }
  .blog .entry-featured {
    max-width: 60% !important;
    margin: 0 auto;
    border: none;
  }
}

Hope that helps.

[rick4him]

@mldarshana

@media (min-width:767px){
.single-post .entry-featured {
max-width: 60% !important;
margin: 0 auto;
border: none;
}
.blog .entry-featured {
max-width: 60% !important;
margin: 0 auto;
border: none;
}
}

I just put in this code and the featured image still doesn’t look right. Please take a look at our blog.

Thank you for all of your help.

[nabeel]

Hey Rick,

Please replace the previous code with the following code:

.single-post .entry-featured,
.blog .entry-featured {
    border: 0;
}
@media (min-width:767px){
  .single-post .entry-featured, 
  .blog .entry-featured {
    max-width: 80% !important;
    margin: 0 auto;
    border: 0;
  }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!