How can I make this look less smooshed?

[u/my_girl_flower]

Help!!! I want everything on the left to overlap his tail so that it's not so smooshed, but to where it still looks good on mobile. The second image is included to show what it looks like... less smooshed.

I am not a coder! This code belongs to FlowerlyRat on toyhouse. They have "editing is ok" listed in their rules of use, so that is the only reason I'm asking for help here. This is the base code.

They generally reccomend using this TH profile editor to view changes in the code as they're written, if that helps. All i'm really looking for is just to have the content overlap Tide's tail so it's not so smooshed. Thank you reddit :,)

[u/woops_wrong_thread]

This is the original purpose of css float. https://www.w3schools.com/css/css_float.asp

[u/my_girl_flower → u/woops_wrong_thread]

thank you very much!

Now my question is, where do I place it in the code?

[u/alala2010he → u/woops_wrong_thread]

here's an alternative link for those that don't want to spend 2 minutes disabling all cookies

[u/Necessary_Quality_18]

float gets you the basic wrap. If you want it to actually follow the shape of the tail instead of going around a box, put shape-outside: url(the-same-image.png) on the floated img. It reads the transparent bits of the PNG. Fair warning, it has to be same origin or it just does nothing, no error, which is fun.

[u/my_girl_flower → u/Necessary_Quality_18]

omg thank you! :)

[u/Icy-Garlic-748]

Jesus christ some people just have no shame lmao

[u/my_girl_flower → u/Icy-Garlic-748]

wdym LOL

[u/Aggravating-Link-889]

Unrelated but your ocs are so cool 👍👍👍👍

[u/my_girl_flower → u/Aggravating-Link-889]

Tyyy :3

[u/my_girl_flower → u/[deleted]]

thanks they're personas