Why are all my images misaligned? [Theme: Hoffman]

  • Resolved C.S. Jones

    (@cs-jones)


    9 years, 6 months ago

    I have a problem: all of my images and videos on my blog are supposed to be centered have migrated to the left after weeks of working correctly.

    Except for the second image in this post, which for some reason has moved right beyond the margins of its column.

    I’m not using any custom CSS to align them, just the built-in buttons on the visual editor, but I have modified my theme’s CSS substantially. If anyone can suggest what might be the problem, I can find the code snippet and post it.

    Thanks in advance.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Except for the second image in this post, which for some reason has moved right beyond the margins of its column.

    That second image is contained in a <div> which has an inline style that sets the width to 910px, which is why it’s extending beyond the margins of the column. Instead of using the Visual editor, switch to the Text editor, locate that <div>, and remove the inline style.

    If you go through all of the other images in that post and remove the inline style from the containing <div>, you’ll find that the images will center properly. I personally avoid using the Visual editor because you can’t see the HTML that’s being generated.

    Thread Starter C.S. Jones

    (@cs-jones)

    Actually, no. There was no div. Setting the image width to 680 in the visual editor fixed it, so I’m guessing it was a glitch of some sort.

    But I still have the problem that all images smaller than 680 are still planted on the left, even after trying a bunch of different CSS fixes. (And deactivating all plugins to see if it was a conflict.)

    Thread Starter C.S. Jones

    (@cs-jones)

    Also, I managed to fix the problem by inserting

    img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}

    At the end of the style.css at the suggestion of another support thread. I’d been trying to modify the existing image tags, which hadn’t been working.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Why are all my images misaligned? [Theme: Hoffman]’ is closed to new replies.