[ianizaguirreParticipant]

Hi, I am confused as to the correct image size I am supposed to use for featured images.

As you can see on this post: http://iamdentistry.com/archive/dentistry/dentist-suicide-rate/

That image is “full” in terms of being flush with the far right container and being justified with the main heading under it.

Yet I am not sure if that image is too big and the actual featured image size that is appropriate and meant to be used with this stack is different? I would like to know the size.

As you can see on other posts if I use a smaller size then I run into the issue with the featured image not being flush with the right container: http://iamdentistry.com/archive/dentistry/fluoride-and-good-dental-hygiene/

[Rue NelModerator]

Hello There,

Thanks for writing in! The default featured image size in X is using a custom size being set in theme which is the entry size based on your screen layout as set in the customizer. The issue here is that it is not being centered when displayed because of the lazy loading of your images. To resolve this, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.entry-featured .entry-thumb{
    text-align: center;
}

Hope this helps. Kindly let us know.

[ianizaguirreParticipant]

Hi When I put that css this is what happens, please look at this attached image: http://iamdentistry.com/wp-content/uploads/2017/03/x-theme-question-1.png

This fixed the image being pushed to the right but now the h1.entry-title is not lined up with the image. As you can see here on this pic: http://iamdentistry.com/wp-content/uploads/2017/03/x-theme-question-2.png

I want to make it look nice and neat by having the bottom text justified with the featured image size

[FriechModerator]

Hi There,

The container of your site is set to max-width: 1190px; so make sure your featured image has that width minimum. Actually you can add this Custom CSS to force the featured image to always respond to the width of the container.

.single-post .entry-featured img {
	width: 100%;
}

However, if the image is small it will be stretch and will look blurry.

Thanks,

[ianizaguirreParticipant]

“The container of your site is set to max-width: 1190px;” How can I change that value ?

[Rue NelModerator]

Hello There,

You can change the Site’s maximum width in the customizer. Please go to Appearance > Customize > Layout and Design > Site Max Width (px).

Hope this helps. Please let us know how it goes.

[ianizaguirreParticipant]

Thank you I fixed it.

[RadModerator]

You’re welcome!

[Author]

Posts