Image not aligning properly

  • Resolved nihhonjohannes

    (@nihhonjohannes)


    4 years, 7 months ago

    Hey again,

    I have stumbled upon another problem. I am currently working on this page of my website: [ redundant link removed ]. I am using one image (image block) and have aligned it on the left side with text (heading block “Gründer” and text block, starting with “Johannes…”) flowing around it on the right side in the block editor. Everything looks exactly as it should in the editor.

    However, saving the page looking at the frontend, the text just appears below the image as you can see at the link above.

    What can I do to solve this? I tried the media and text block, but that did not allow for the text to flow around the image at all.

    • This topic was modified 4 years, 7 months ago by Jan Dembowski.

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

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

  • Hi there,

    This is because you have that heading block you have under the image. This theme (and several others I checked, so I’m guessing this is a standard way to style headings) includes styling to clear floats whenever you add a heading. In other words, a heading won’t wrap around what goes before it, and subsequently anything you add after the heading won’t wrap either.

    In fact, for me it’s not even wrapping in the block editor. If I make a post using the classic editor it does wrap in the editor, but in the published post it also shows the heading and text below the image, because it’s still the same heading styling being applied.

    In order to have the text wrap, you have to make the heading wrap first, and this can be done by using custom CSS to turn it into an inline element.

    Edit the page, and click on the heading. In the editor sidebar, click Advanced, and add a custom CSS class, like wrap_this.

    Then go to the Customizer and open the CSS panel. Add the following code there:

    h4.wrap_this  {
	display: inline;
}

    (You can leave out the h4 as well – I’m just using it to make the CSS more specific, and that’s the type of heading you’re using here.)

    Making the text wrap without having the heading wrap as well, i.e. with the heading staying below the image, is not possible.

    Thread Starter nihhonjohannes

    (@nihhonjohannes)

    Thank you again, that worked perfectly ??

    Glad I could help ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image not aligning properly’ is closed to new replies.