How to widen the featured image using CSS

radiusgrp · Member · Jul 10, 2014 at 7:22 pm
Copy link

Add topic to favorites
I changed the size of my content panel using CSS, and now my featured images aren’t wide enough. Is there a CSS command I can use to widen the featured image area as well? I am using the confit theme.

The blog I need help with is: (visible only to logged in users)
gracejiyoung · Member · Jul 10, 2014 at 7:47 pm
Copy link
Hi there,

I think the best way to go about this would be to resize the image before uploading only because setting a hard size on featured images may play with the proportions of the image. I find that lots of images are a case by case type situation.

After looking at the support guide for Confit, I found that the featured image for blog posts works best with images at least 618 wide.

Let me know if you have any questions with this!
radiusgrp · Member · Jul 10, 2014 at 7:49 pm
Copy link
Hi there,
Thank you for the fast response! All our images are larger than the 618, wide. There seems to be padding on the right that is forcing the images to the left and leaving a big gap between the edge of the image and edge of the content box. Do you have any suggestions?
gracejiyoung · Member · Jul 10, 2014 at 8:09 pm
Copy link
It looks like the featured images are centered within the post as seen here:

Are you seeing something different? I do see a gap, but it looks centered not really forced to the left.

If you see something else, can you please take a screenshot and upload that to your Media > Library page? I’d be happy to take a further look.
radiusgrp · Member · Jul 10, 2014 at 8:17 pm
Copy link
Sorry for the confusion. I went in and embedded all the featured images in the text to try and make it look all right until there is a fix. I’ve uploaded a snapshot of the problem into my media library. The problem only occurs when I set the image as the featured image.
gracejiyoung · Member · Jul 10, 2014 at 8:30 pm
Copy link
Hi there,

Thank you for the screenshot! I was able to pinpoint the issue. It looks like you added this CSS:
```
#wrapper {
	max-width: 1154px;
}
```
Please remove that and your featured image will show up without any gaps as seen here:

Let me know if you have any questions with this!
radiusgrp · Member · Jul 10, 2014 at 8:35 pm
Copy link
Hi there,
I added that CSS to widen the whole content pane. I’d like to keep the pane that size, and adjust the featured image size to match. Is that something we could do? Thank you!
gracejiyoung · Member · Jul 10, 2014 at 9:09 pm
Copy link
Unfortunately, the only possibility I can think of would break the display on mobile/tablet devices. This can happen, so I don’t recommend changing the layout of themes.

However, our volunteers/staff in CSS Customization forums may have a better solution:

https://en.forums.wordpress.com/forum/css-customization

I’m sorry I couldn’t be of more help.
radiusgrp · Member · Jul 10, 2014 at 9:10 pm
Copy link
Could you share that option with me so I can at least present the option to my boss?
gracejiyoung · Member · Jul 10, 2014 at 10:54 pm
Copy link
Sure thing! You can add this:
```
.post .entry-header img {
	width: 748px;
}
```
This will just make featured images 748 px so that there is no gap.
radiusgrp · Member · Jul 11, 2014 at 12:39 pm
Copy link
Thank you so much for all your help! It’s very much appreciated :)
gracejiyoung · Member · Jul 11, 2014 at 5:26 pm
Copy link
You’re very welcome!

Cheers!

No items found.