Delete:
.content p img {
margin-left: -15px;
margin-right: -15px;
}
Add:
.content p img {
width:100%;
}
This will make image fit within the paragraph, so will have equal margins to left and right.
Also, the images on the page you linked to are a smaller width than the ones on your Home page. Just edit the images to the correct size if you want them to look the same as the Home page images.
Thanks! That certainly helps for the broken images. Only issue now is the images that normally fit, don’t look good anymore.
For example this post: http://www.ritsy.nl/paws-by-eddie/
(haven’t actually edited it yet. Seeing it via firebug)
Oh haha, posted that before I saw you replied.
So I should make the images of my newer posts smaller to make them fit again?
It depends. If you have a lot of old posts with smaller image dimensions hard coded inline inside the images attributes, it might be easier to just settle for the margin around the images, deleting the margin left:-15px, etc, and using width: 100% instead. That would change every post’s images in one swipe, with just CSS.
If you keep your CSS as is, you’ll need to edit the inline width attribute of every image you put in a post that had that smaller width.
About 90% of my posts have smaller images. So the code you gave me will really help with that.
It’s only the newer posts since I have this theme that fit. (Well they won’t after I add the code you gave me)
The newer posts pictures are bigger which now makes them ‘hang’ over the post space. But if there is no quick fix code for that then I’ll just have to make them all slightly smaller.
Oh. Nevermind.. I must have been doing something wrong in firebug. I added your code and everything looks normal. In firebug it looked completely different. Well you’ve been a great help. Thank you very much! 😀
Keep in mind that 100% width attribute will affect every image you put in a post, so long as it’s inside a paragraph.
You’d need to change the editor from visual to text mode and put div around it if you want an image to be smaller:
<div><image src="http://www.blah.com/image1.jpg" /></div>
Yes! Will keep that in mind. Thank you!