Left aligned image is partly in margin

  • Unknown's avatar
    effectivedesktop · Member ·

    Hello all,
    I’m wrapping text around a left-aligned image, and although the text is wrapping, the image itself is not always aligned with the left edge of the text; it goes out too far into the margin (to the left).
    I’m using the free Twenty Thirteen theme.
    I’ve already looked the Support and Forum pages. I found a similar post from Jan 2014 but in that instance the issue was caused by the CSS of the theme. In my case it happens on some pages but not others. For example, on “An Invitation to begin a journey” the image at the bottom of the page is aligned correctly, but on the Contact page, the image is partly in the margin.
    Any help would be much appreciated.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    lizthefair · Member ·

    I’m happy to help you with this. Could you let me know which page you are you are seeing this problem on?

  • Unknown's avatar
    effectivedesktop · Member ·

    Hi Liz
    Thanks for your response. The particular page is the Contact page at https://sabinedahnyoga.wordpress.com/contact/.
    Thanks

  • Unknown's avatar
    lizthefair · Member ·

    Hi there,

    So the issue here is that having left and right aligned images pulled into the margin a bit is a feature of your theme.

    You can override that feature with a little inline CSS when you add an image. For example, on the Text view of your contact page, the original code for the image was

    <a href="https://sabinedahnyoga.files.wordpress.com/2014/12/104_0365x.jpg"><img class="alignleft" src="https://sabinedahnyoga.files.wordpress.com/2014/12/104_0365x.jpg?w=225" alt="Anjali Mudra" width="141" height="188" /></a>

    By adding

    style="margin-left:0;"

    to the end of the <img> tag you get this:

    <a href="https://sabinedahnyoga.files.wordpress.com/2014/12/104_0365x.jpg"><img class="alignleft" src="https://sabinedahnyoga.files.wordpress.com/2014/12/104_0365x.jpg?w=225" alt="Anjali Mudra" width="141" height="188" style="margin-left:0;" /></a>

    which puts the image back where you wanted it.

    I’ve made this change on your contact page already, but I’m sharing the code here so you can make the change yourself next time!

  • Unknown's avatar
    effectivedesktop · Member ·

    Thank you very much for this! It’s very helpful.

  • The topic ‘Left aligned image is partly in margin’ is closed to new replies.