Inserted image is out of position

  • Unknown's avatar

    Hi,
    I’ve just started out with WordPress and created my very first post. The images I added to my blog post are in position while editing but they are sticking out when I check my work out in preview. How can I fix it and place them in position?

    Theme: Libretto

    https://imgur.com/a/kt0Dx

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

  • Unknown's avatar

    Hi,

    My tests suggest that the affect you describe is a result of the theme’s design. That’s evidently how Libretto treats images aligned to the left or right, though I haven’t tried other images. On a test site with the Lovecraft theme activated, in which I duplicated a portion of the post, I was able to the align the image to the left margin by inserting padding to the left of the image. The padding code used looks like this:
    <p style="padding-left: 10px;">img URL</p>
    Adjusting the number of pixels in the code to 51 produced the closest alignment. So the padding and img URL combination looks like this:
    <p style="padding-left:51px;"><img class="wp-image-52 alignleft" src="https://halldorshall.files.wordpress.com/2016/12/h-_p-_lovecraft_june_1934.jpg?w=253&h=313" alt="h-_p-_lovecraft_june_1934" width="253" height="313" /></p>

    You may add a “modlook” tag to the sidebar to call for staff attention if you’d like to get a more definitive response.

  • Unknown's avatar

    Correction:
    “On a test site with the Libretto theme activated…”

  • Unknown's avatar

    You could also replace the p tags with div tags:
    <div style="padding-left:51px;"><img URL></div>

  • Unknown's avatar

    Hi,

    Thank you for your reply. I’ve inserted the codes written above, I actually set padding left:100 pixel which resulted in the look that I almost wanted to have but only on desktop. Both in tablet and phone view the image was more in the center while without editing the code the picture just looked perfect in mobile view but sticked out in the other two.

    Could it be that Libretto was designed for exclusively mobile usage? Although I have not seen anything that would have indicated that.

    https://imgur.com/a/Et7LL

  • Unknown's avatar

    I should I realized that the result would be dependent upon screen size and aspect ratio. I’m using a desktop PC with landscape orientation and 1280 x 1024 screen resolution. Smaller, and particularly narrower, screens will produce different results.

    Could it be that Libretto was designed for exclusively mobile usage?

    Not necessarily exclusively, but the designers might have focused on that side of the market.

  • Unknown's avatar

    “I should have realized…”

  • The topic ‘Inserted image is out of position’ is closed to new replies.