Since it got positive feedback I am sharing the code here for general use. It is fully functional for mobile and the images do not need to be sized to specific dimensions. It works better to use square images / gifs for the round portrait though.
This is what it looks like. Code below:
This is what it looks like. Code below:
About
INFO
INFO
INFO
Best for
INFO
INFO
INFO
CHARACTER NAME -- News and wants
Wants
TEXT
News
TEXT
Code:
<div style="max-width: 100%; font-family: Arial, sans-serif; border: 2px solid #444; padding: 10px; border-radius: 10px; box-sizing: border-box;"><div style="text-align: center; margin-bottom: 15px;"><img src="https://i.ibb.co/gD3CxnV/PLACEHOLDERGIF.gif" alt="CHARACTER NAME" style="width: 150px; height: 150px; border-radius: 50%; object-fit: cover;"></div><div style="background-color: #f0f0f0; padding: 10px; border-radius: 5px; margin-bottom: 15px;"><p style="margin: 5px 0; text-align: center;">@"Morrigan Crowley"</p><center><p style="margin: 5px 0;"><strong>About</strong></p>
<p style="margin: 5px 0;">INFO</p>
<p style="margin: 5px 0;">INFO</p>
<p style="margin: 5px 0;">INFO</p>
</center> </div><div style="background-color: #f0f0f0; padding: 10px; border-radius: 5px; margin-bottom: 15px;">
<center><p style="margin: 5px 0; font-weight: bold;">Best for</p>
<p style="margin: 5px 0;">INFO</p>
<p style="margin: 5px 0;">INFO</p>
<p style="margin: 5px 0;">INFO</p></center></div><div><img src="https://i.ibb.co/VVLSk75/PLACEHOLDER-HEADER.jpg" alt="Header" style="width: 100%; max-height: 150px; object-fit: cover; margin-bottom: 15px; opacity: 0.8;">
<center><h2 style="color: #333; margin-top: 0; font-size: 1.5em;">CHARACTER NAME -- News and wants</h2></center> <p><b>Wants</b>
TEXT
<b>News</b>
TEXT
</p></div></div>