Start a new topic

margin properties no longer working as expected

I use embedded images in a lot of my posts so that I can have more control over their formatting. Normally, when you embed an image into a post, it adds a margin to either side of the image instead of making the image the full-width of the post box like regular image attachments. To fix this, I've been using the following code:


`<div style="margin-left: -0.75rem; margin-right: -0.75rem;"><img src="image URL here" style="width: 100%;"></div>`


this used to remove the margins on either side of the image and make it full-width like a regular attachment.


I'm not sure what changed or when (my best guess is sometime between December 2nd and this morning), but this method doesn't work anymore, and now every post I've ever made like this is no longer displaying properly. The embedded images now have margins again, and the left and right sides of the images are cut off a little instead of being stretched to fit the full width of the post box.


for example, all of the images beneath the readmore on this post have their edges cut off when they didn't before: https://cohost.org/ChrisStapley/post/3528339-email-me-at-chri


This behavior is consistent on firefox 121 on windows 10, chrome 120 on windows 10, and firefox 120 on android.


If this change was intentional, I'm happy to just go back and tweak the HTML/CSS on all my affected posts, but I haven't seen anything about this in any of the patch notes, and I don't want to touch anything if this is a bug


8 people have this problem

i'm also experiencing this! i'm assuming this was changed during dark mode implementation. as an example, many old css crimes (https://cohost.org/fish/post/237372-disco-elysium) now have the white post border around them, when they used fit like an uploaded photo with the same margin trick.

Also experiencing this- I would personally appreciate if the negative margin trick was fixed/added back in, as the only other solution I can personally think of is using a `position:absolute; left:0; width:100%; height:100%; z-index: -1;` background div, in a containing parent div to limit the space it covers. The negative margin solution is much cleaner and preferable imo

Whoops, actually the technique I shared there doesn't fully work since the background div actually leaks out of the parent div :( I somehow forgot to fully test that

Since this is probably the lowest-priority issue imaginable and staff are out for the holidays, My strategy for now has been to just go back and un-style all my embedded images, so that they have the margins but at least they aren't cut-off. I've also copy-pasted the old text & code from my posts into a text document somewhere so that if the old margin behavior is ever restored, I can just copy-paste the old code back into my posts to restore their original formatting.


Not the best solution, but it's all I can think of for now. If anyone else figures out some other workaround please let me know!

I think the history here is switching from "overflow-hidden" to "overflow-clip" to implement the new "read more" behavior. Then bark found that this allowed for clickjacking because clip didn't prevent overlapping UI elements with unspecified height.


Hopefully this was just a throw everything at the problem patch to fix the immediate issue. Moving the overflow-hidden to the wrapper element would be great and should contain any clickjacking shenanigans.


1 person likes this

also running into this issue, which broke at least one old post of mine and possibly more


1 person likes this
+1 several of my old posts made heavy use of the margin technique so this issue definitely breaks those :(
Login or Signup to post a comment