Images On Page “Squished”

On the page with the squished images, you have the images set to align left, which adds a class of alignleft to the image.

Then in the CSS, you have this

.alignleft {
float:left;
width:150px;
}

So any image with .alignleft is going to be resized to a width of 150px, causing it to “squish.”

Thank you for the info, Spencer.

I am very new to WordPress and not very good with CSS and HTML.

Would you be kind enough to tell me what I might do to fix this?

Thank You So Much In Advance.

Jeff

Jeff

First off, when editing the post, you should remove alignleft from the lists of classes on the image. (If you are using the Visual Editor, you can edit the image, and change the alignment to “None”).

Then, in your style.css file in the theme, find the following:

.alignleft{
	float:left;
	width:150px;
}
.alignright{
	float:right;
	width:200px;
}

and change it to:

.alignleft{
	float:left;
}
.alignright{
	float:right;
}

This will remove the fixed width of the class, so that in the future if you actually need to align images to the left or right, they will not be constricted by the CSS.

Thank you so much!

I will go in and see if I am able to figure out what you have suggested.

I thank you so much for your kind assistance!

I’ll post back here if I have any problems.

You’re the best!

Jeff

Looks like that fixed it, Spencer!

Thanks a million! You’re awesome!

Jeff

I want to guess that I am having the same issue. On my home page I have problems because the pictures are bunched together at times and overlap into previous posts. It is all fine when I go directly to the posts, the pictures come up correctly. I tried the suggestions from above but I’m thinking I either didn’t go to the right place to look for that specific code OR I did and there was no value (150px).

I wasnt sure if the custom fields information had anything to do with it but I deleted it. It carried over from my blogger…….I imported all of my posts into wordpress, so maybe that has an effect.

Please help. Thanks

Can you post a URL to your site?

https://all4serviceonline.com

I am having the same problem. Photos were uploading fine, then hte last few were squished. If you go directly to the post, the photos are fine. I changed the photot alignment to “none” and it did not change it. I could not find this in CSS:
.alignleft{
float:left;
width:150px;
}
.alignright{
float:right;
width:200px
But I do not know what I am doing with CSS.

Here is my blog https://embracingthemundane.wordpress.com/

Thank you!

I forgot to add that when viewing the post through archives, all the photos are correct, no squishing. The squishing is happening only on the home page.

On your homepage, the following CSS is being applied:

.home .size-medium, .home .size-large {
height:auto;
margin:0 0.5em 0.5em 0;
max-width:590px;
overflow:hidden;
}

So if you don’t want a max-width on the images, simply remove that line.

Just the max width line or the whole thing you have up there? I deleted the max-width:590px; but it did not fix it. Sorry, I am sure this is a simple fix, but I am just clueless. Thanks!

did you refresh browser after making the change? Press ctrl+f5

you have to refresh browser to see css changes

Just the max-width line. Make sure you save the changes.

I don’t have a “save stylesheet” option. I did save in the file drop down after deleting the max width line. Do I need to upgrade in order to make this change? I have never made any changes to css before. Thank you!