Support » Theme: SimplyBlack » Cannot increase margin around images to separate from text

  • Hello

    I would like to increase the space between a left or right aligned image and the text wrapped around it.

    The text is too close to the edge of the image.

    I’ve tried several different rules, but nothing is working.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 16 total)
  • 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.

    Theme Author Guido

    (@guido07111975)

    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!

    Theme Author Guido

    (@guido07111975)

    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

    MRanson

    (@mranson)

    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

    Theme Author Guido

    (@guido07111975)

    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

    MRanson

    (@mranson)

    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!

    Theme Author Guido

    (@guido07111975)

    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

    Theme Author Guido

    (@guido07111975)

    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

    MRanson

    (@mranson)

    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.

    Theme Author Guido

    (@guido07111975)

    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

    MRanson

    (@mranson)

    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

    Theme Author Guido

    (@guido07111975)

    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.

    Theme Author Guido

    (@guido07111975)

    Hi,

    Have send you an email.

    Guido

Viewing 15 replies - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.