Strange formatting and Sizing

• 

  msucampusedge · Member · Apr 18, 2022 at 8:39 pm

  • Copy link
  • Add topic to favorites

  I am having difficulty with weird formatting of certain pages and images being oversized. I move and adjust them to my liking in the editing page, but when published or in preview there is a difference. For example, in the ‘Join Us’ page, the sections should all be left-aligned, not in a diagonal line. In the ‘Pub Theology’ page the two photos are displaying much larger then what it is in the editor.

  WP.com: Yes
  Correct account: Yes

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

• 

  kokkieh · Staff · Apr 19, 2022 at 9:41 am

  • Copy link

  Hi there,

  For the Join Us page this is due to how images are aligned left or right in HTML: left or right aligning an image is done using something called a float, and any subsequent content you add after a floated element will wrap around that element, including subsequent images.

  When you’re writing plain HTML you prevent that by adding an empty element that clears the float, and that forces the next element back against the margin.

  In the block editor you can achieve this by inserting a spacer block:

  https://wordpress.com/en/support/wordpress-editor/blocks/spacer-block/

  Add that block directly above each new image, and set the height to only around 10px, and it should do the trick. (I see you already tried something similar by adding extra paragraph blocks, but both HTML and the block editor just ignore empty paragraphs, so that won’t work.)

  Another option that you can consider, and which would work especially well with the way you’ve added structured that page, is to use the Media and Text block, rather than individual image and paragraph blocks. The Media and Text lets you explicitly group an image with a specific section of text, and prevents any text from wrapping around the image.

  https://wordpress.com/en/support/wordpress-editor/blocks/media-text-block/

  On to Pub Theology:

  I only see one image on that page at the moment, but it looks like you have negative dimensions set for the image, which is likely why the custom size setting isn’t getting picked up:

  https://d.pr/i/5FC5p2

  Try changing those to positive values, or simply click on the image and drag its edges until it’s the size you want.

  If the published version still shows a different size after you’ve done that, let us know so we can take another look.