Cannot increase margin around images to separate from text

Hey, @mranson

To do that, go to Appearance → Customize → Additional CSS and enter the following code:

.wp-caption-text {
  padding: 0 15px;
}

Let me know if that does it.
Thank you.

Hi,

Guess you mean the featured image at that page:

Default is:

img.alignright {float:right; margin:0.4em 0 0.4em 1em;}
img.alignleft {float:left; margin:0.4em 1em 0.4em 0;}

Change the 1em into something else… such as 1.5em. (or use pixels instead)

Guido

Hi guys, thanks for your replies. I’m afraid I didn’t explain myself clearly! Neither of your rules solves the problem.

The problem isn’t with the caption text or the featured image. It’s with other images that are inserted within the body of the post and then are aligned right or left, and thus have a section of text wrapped around them.

If you go to the link and scroll down you’ll see that the third image is left aligned. The post text beside it is touching the edge of the image. This happens to any image inserted into the body of the post text and aligned either left or right (obviously, this is not a problem for centre aligned images).

So, there needs to be a margin between the wrapped text (not caption text) and the edge of an image inserted into the body of the post (not the featured image).

Hope that’s clearer!

Hi,

Aha, I understand.
You can fix this by left-aligning that image (click the image and choose left align). When you insert an image it will be displayed on the left by default, but it does not have the “alignleft” class.. which contains the margin.

Guido

Hi Guido,

The image is already left aligned. This is what has caused the problem. I think you might be referring to another image which is centre aligned. I did this after noticing the problem to use it as a comparison. I’ve included a link to a screenshot of the problem below.

https://michaelvictorbowman.com/wp-content/uploads/2019/02/left-align-no-text-space.png

Thanks

Hi,

Guess you did not read my reply correctly.. I know it’s located on the left, but you did not align it.. otherwise the CSS class of the image should contain “alignleft”. And it doesn’t, it’s now class="wp-image-326". So when it’s left aligned the class will be class="wp-image-326 alignleft" or something similar.

Guido

Ok, now I’m confused!

I see what you’re saying about the CSS class. However, the WordPress editor is showing the image as left aligned.

I’ve just experimented. I right aligned the image. The image moved, the text wrapped on the left, but the CSS class did not change.

I put it back to left align. The CSS class did not change. I selected left align for a second time, and this moved the text below the image, but the CSS class did not change.

Despite the class, the evidence of my eyes is that a left aligned image has wrapped text right up against it, which does not look good.

I remain confused!

Hi,

Left align via the image itself.. so click the image and set alignment to the left there.

Are you using the new editor or still the “old” one?

Guido

Hi again @mranson

Guess I did not explain it correctly.. click the image (in Visual/WYSIWYG editor) and go to the image properties and click left align. So left align via the image properties.

Guido

Hi Guido,

I’m using the old editor.

I have tried using left-click > image properties. The context menu that appears does not have a ‘properties’ option.

I have tried using the alignment buttons in the visual editor main menu, and I’ve also tried using the alignment buttons that appear in a floating submenu when you click on the image, itself. The result is the same, no matter which method I use.

Hi,

In the old visual editor click the image and select the edit (pencil) symbol.. underneath the Display Settings you can set the alignment.

Guido

Hi Guido,

I clicked through the edit button (pencil) and in the Display Settings the image was already left aligned. I did not adjust any of the settings.

To recap, because I was late replying to this thread: there are three methods of setting alignment using the visual editor and each one results in a left aligned image that has the text very tightly cramped next to it. The aim is to have a comfortable margin between the text and image.

The image in question is this one:
https://michaelvictorbowman.com/wp-content/uploads/2019/02/left-align-no-text-space.png

Cheers

Hi,

I fully understand what you want and it just should work fine. I did include styles in my theme to add some margin to the left, when an image is left-aligned. But somehow it’s not working at your website.

Can I reach you via that website, for a temp login? So I could take a look at it myself?

Guido

Hi Guido,

There’s an email contact form at the bottom of the ‘Connect’ page.

Hi,

Have send you an email.

Guido