Closed Solved! Empty Space Under Image Float on Mobile

[bastion]

So I'm using some pretty large images for this character's profile and wanted to limit how big the images would display. I'm new to coding so I'm following the tutorial in the forum, but when I looked at the offer on Mobile there's this big empty space beneath the image, which I assume relates to the height restrict? Is there a way to get the image to be restricted from displaying beyond a certain height without it creating this weird empty space on Mobile?

[CENTER][B][SIZE=5]Akiko Uzumaki ☀️ 14 ☀️ Demigirl ☀️ She/her ☀️ Orientation tbd[/SIZE][/B]
Konohagakure | Team 9 | Genin | Water affinity | Trap specialist[/CENTER]
[URL='https://www.deviantart.com/witchynade'][SIZE=2]art by WitchyNade@DeviantArt, design by me[/SIZE][/URL]
[imageFloat=left][HEIGHTRESTRICT=500][IMG]https://cdn.discordapp.com/attachments/393420542545362957/934852657481396265/Akiko_by_WitchyNade_dA.png[/IMG][/HEIGHTRESTRICT][/imageFloat]
[B][SIZE=5]PERSONALITY[/SIZE][/B]
positive traits: (at least 3)
neutral traits: (at least 3)
negative traits: (at least 3)
Akiko is well-known around the village for her friendly and cheerful personality. She's always seen with a smile, usually with some paint or chalk marks on her face. She's always making some kind of colorful mess.

Akiko loves pranks, but her idea of a prank is rather wholesome. Her favorite prank is leaving a little handcrafted gift for someone hidden in their home, for them to discover later. She's known for her "pranks" of handing out chalk flowers and drawing chalk murals.

[B][SIZE=5]HISTORY[/SIZE][/B]
Akiko's parents died in the Third Shinobi World War. Her older brother, Masao, took custody of her, although he often relied upon his aunt Umiko and his younger cousins for help. She loves all her family and is doted on in return. She works hard to live up to the amazing ninja in her family and is determined to become one as well, despite hating hurting others.

[imageFloat=right][HEIGHTRESTRICT=500][IMG]https://cdn.discordapp.com/attachments/393420542545362957/934852690104709190/Akiko_by_WitchyNade_dA_2.png[/IMG][/HEIGHTRESTRICT][/imageFloat]
[B][SIZE=5]COMBAT[/SIZE]
nin 1 | tai 3 | gen 0.5 | int 1 | str 3 | spd 2.5 | sta 4 | han 1 | total 16

WEAKNESSES:[/B] Akiko has terrible chakra control, which played a huge factor in her graduating late despite having such skilled family members to teach her. She can perform the basic E-rank techniques taught at the academy, but anything more advanced is beyond her capabilities at this time. Although she would never admit it, it's a source of frustration for her that she lacks the signature Uzumaki skill with sealing techniques.

[B]SIGNATURE JUTSUS:[/B] Akiko's signature techniques all revolve around traps and pranks.

 

[Novelight]

I'm afraid base BBcodes won't do the trick, though I won't be surprised if I'm proven wrong. The best alternative would be to custom make a code using the CSS method if you really need that extra space in the bottom to be gone.

 

[bastion]

I'm afraid base BBcodes won't do the trick, though I won't be surprised if I'm proven wrong. The best alternative would be to custom make a code using the CSS method if you really need that extra space in the bottom to be gone.

Oh

 

[bastion]

I'm afraid base BBcodes won't do the trick, though I won't be surprised if I'm proven wrong. The best alternative would be to custom make a code using the CSS method if you really need that extra space in the bottom to be gone.

I'm having a lot of trouble figuring out CSS at all oTL

 

[Alteras]

This should work:

[imageFloat=left][heightrestrict="100%; max-height: 500px; width: auto; aspect-ratio: 669/960; 500"][img]https://cdn.discordapp.com/attachments/393420542545362957/934852690104709190/Akiko_by_WitchyNade_dA_2.png[/img][/heightrestrict][/imageFloat]

Didn't think I'd have to use CSS injection with heightrestrict ever...

For those curious about the technical stuff behind it:

Spoiler

For a technical explanation why it needs to still use height restrict, it is because in the bbcode, heightrestrict applies a CSS class to the img tag, which alters how the height and width are done in relation to each other. While adding max-height and height is all good via CSS, it actually fails the core heightrestrict purpose on larger screens, so aspect-ratio is used to drive it back to size. However, because aspect-ratio is a relatively new CSS property, if someone view this on an older browser, it might not work. but given the number of generations that have passed since its introduction, it should be fine.

example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet dictum sit amet justo donec enim diam vulputate. Facilisis volutpat est velit egestas dui id ornare arcu odio. Nulla pellentesque dignissim enim sit amet venenatis. Ipsum faucibus vitae aliquet nec ullamcorper sit. Sapien pellentesque habitant morbi tristique. Eu consequat ac felis donec et odio pellentesque diam volutpat. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Euismod elementum nisi quis eleifend quam adipiscing vitae. Risus ultricies tristique nulla aliquet enim. Aliquet bibendum enim facilisis gravida neque convallis a. Tempus imperdiet nulla malesuada pellentesque elit eget. Morbi tristique senectus et netus et malesuada fames ac turpis. Fermentum dui faucibus in ornare quam viverra orci. Lorem mollis aliquam ut porttitor leo. Dictum at tempor commodo ullamcorper a lacus vestibulum. Aliquet nec ullamcorper sit amet risus nullam eget felis.

Nulla pellentesque dignissim enim sit. Proin sed libero enim sed faucibus turpis in. Purus in massa tempor nec feugiat nisl. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. In tellus integer feugiat scelerisque varius. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Placerat orci nulla pellentesque dignissim enim. Tincidunt lobortis feugiat vivamus at augue. In tellus integer feugiat scelerisque varius. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Venenatis a condimentum vitae sapien pellentesque habitant morbi. Rhoncus urna neque viverra justo nec ultrices. Duis at tellus at urna condimentum. Viverra suspendisse potenti nullam ac tortor. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar.

Nisi porta lorem mollis aliquam ut porttitor leo a. Non enim praesent elementum facilisis. Amet nisl suscipit adipiscing bibendum est ultricies integer. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Tempor id eu nisl nunc. Habitant morbi tristique senectus et netus et malesuada fames. Faucibus a pellentesque sit amet porttitor eget. Suspendisse faucibus interdum posuere lorem ipsum dolor. Pharetra et ultrices neque ornare aenean euismod elementum. Dictum varius duis at consectetur lorem donec. Vulputate sapien nec sagittis aliquam.

Non enim praesent elementum facilisis leo vel. Commodo quis imperdiet massa tincidunt nunc pulvinar. Libero enim sed faucibus turpis in. Ultrices eros in cursus turpis massa tincidunt. Eu scelerisque felis imperdiet proin fermentum leo vel orci. Ac odio tempor orci dapibus ultrices in iaculis. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Nec dui nunc mattis enim ut tellus elementum sagittis. Et leo duis ut diam quam nulla. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi. Consectetur adipiscing elit duis tristique sollicitudin. Mattis nunc sed blandit libero volutpat sed cras. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Libero justo laoreet sit amet cursus sit amet. Condimentum lacinia quis vel eros. Nisi est sit amet facilisis magna etiam. Volutpat maecenas volutpat blandit aliquam. Non odio euismod lacinia at quis risus sed vulputate. Pretium nibh ipsum consequat nisl vel pretium lectus. Risus in hendrerit gravida rutrum quisque non tellus orci ac.

 

[bastion]

Thank you so much! This all had me so confused!