Docs

[jdfesta]

Good morning. Curious — how can I keep images from stretching out to the width of the site? I’m trying to add a small Pinterest pin (width 735px) on my blog posts, but it keeps getting stretched out.

Thanks!

[Prasant Rai]

Hello There,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

[jdfesta]

Sure. There is an example in this post if you scroll all the way to the bottom. See how the Pinterest pin looks more like a stretched out photo?

http://nyctoursandphotosafaris.com/transmitter-brewing/

Instead I want it to look like the Pin at the very bottom of this post:

http://epicureandculture.com/accessible-attractions/

Thanks!

[Friech]

Hi There,

I don’t see any pin it on the bottom of that post. Only the Pinterest share icon.

http://image.prntscr.com/image/77f873cac4cf4e798f906268b247ece6.png

Please clarify or provide us screenshot.

Thanks.

[jdfesta]

It’s above that bio box. Here’s a screenshot. Can’t fit it all in because it’s so large though:

http://prnt.sc/e28g7e

Basically I want to know how I can keep images at the size I upload them, instead of them stretching out to the width of the site?

Thanks!

[Christian]

X does not crop feature images so you must be using a third party image plugin. Please deactivate all third party plugins and check again. Looks like you’re using Photon from Jetpack.

Thanks.

[jdfesta]

Hmm that didn’t work, but not sure you’re understanding. My problem isn’t cropping, it’s that the photo is being stretched to the width of the site. I want the photo to stay at 700 pixels wide.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.single-post .entry-featured {
    width: 84%;
    margin-right: auto;
    margin-left: auto;
}

Hope that helps.

[jdfesta]

Thank you. I can’t find the Global CSS though. When I go to Customize -> Custom it just has areas for Custom Code, but I don’t see the word “global.”

Screenshot attached:

http://prnt.sc/e2vjwe

[Friech]

Hi There,

Can you confirm that you’re using the latest version of X|Theme? (4.6.4 as of this writing). You site is UNDER MAINTENANCE mode right now. Would you mind providing us login credentials in private reply so we can take a closer look.

Thanks.

[jdfesta]

This reply has been marked as private.

[Lely]

Hi There,

The credentials are not working. It says invalid username.
The image is just displaying 100% width depending on it’s container. To reduce the size, please add maximum width to that image.

Hope this helps.

[jdfesta]

I’m still confused. How do I do that? This is the html code for that image:

I want it to show at 735px wide, not stretched further. How do I alter this code?

Thanks!

[jdfesta]

Oops, I see my html turned into the real photo. Here is a screenshot;

http://prnt.sc/e3syol

It’s the code on the bottom. What do I add to it to make sure it doesn’t stretch?

Thanks!

[Paul R]

Hi,

You can add max-width inline style to your image.

eg.

<a href="http://nyctoursandphotosafaris.com/wp-content/uploads/2017/01/pin22.jpg" rel="nofollow"><img style="max-width:735px;" src="http://nyctoursandphotosafaris.com/wp-content/uploads/2017/01/pin22.jpg" alt="cupcakes in nyc" width="735" height="1102"></a>

Hope that helps.

[Author]

Posts