How do I change the featured image size when the post opens?

juliarich7 · Member · Sep 30, 2014 at 4:45 pm
Copy link

Add topic to favorites
Hello,

I would like to decrease the featured image size when the post opens in all of my posts. I have tried googling this and see others have had the same question, but I can not figure out how to override this. Please help and thank you.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 1, 2014 at 6:20 pm
Copy link
Hi there, you can use the following CSS and adjust the width to your liking. One thing you will notice is that you then end up with white on the left and right of the featured image, and it looks a little strange to me that it is then narrower than the post content.
```
.entry-thumb img {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
```
You could add a background to the top area where the featured image with by adding the following in addition to the above.
```
.entry-thumb {
    background-color: #CCC;
    padding-bottom: 10px;
    padding-top: 10px;
}
```
See what you think.
juliarich7 · Member · Oct 1, 2014 at 10:01 pm
Copy link
Hello,

Thanks for your help. I do not want the featured image to be narrower than the post. Maybe there is a different way around this. Some of my posts are perfect, but others are huge (Beautiful bookends, Zinnia joy, There’s gold in them that hills, fluttery feelings). They are so big, it is impossible to enjoy the photo. Why the difference? I can’t figure it out. I appreciate any suggestions, Julie
thesacredpath · Member · Oct 2, 2014 at 3:20 am
Copy link
On Beautiful Bookends, the image is 599px wide by 799px tall. My suggestion would be to use images for featured images that are landscape proportions. The suggested width for featured images is 1140px wide according to the Clear News Theme Showcase page, so figuring a 4:3 proportion, that would be 1140px wide by about 855px high. You could also use even shorter images if you wished, such as 3:2 which would be 1140px x 760px.

With CSS, there really isn’t a way to change proportions of an image without distorting them. You can in some instances reduce the area the photo can occupy and then hide the overflow, but that is tricky to do with responsive theme designs and have it translate well to tablets and phones.

I would suggest cropping and sizing your images to 4:3 or 3:2 proportions ahead of time and then you should have a consistent look to your posts and pages.
juliarich7 · Member · Oct 2, 2014 at 1:34 pm
Copy link
That’s it- lightbulb! I am sure that is the problem. Not only are you a happiness engineer but you are a genius. Thanks for your help. Julie
thesacredpath · Member · Oct 2, 2014 at 3:25 pm
Copy link
Well thank you and you are welcome. Do let us know if you have additional questions or problems.

No items found.