Myno
mainly just zhat its use of css float and positioning makes it slightly more of a pain to make responsive zhan it should be (iirc it also made it slightly more annoying to stack on top of each ozher?)
Myno
nozhing major, i just felt a simpler, more easily tinkerable-wizh template was a better fit for me and for anyone who wants to make zheir own
Andréa de Alarojas
The Winged Star of Tozarra
I'm still sticking with this one because it makes me feel more Intimidating and Dragon (and also some creatures very very close to me use it so its perfect to riff on 'em) but honestly yeah i've noticed it too. it gets... weird when it comes to spacing etc. unfortunately i do not understand CSS well enough to fix it
Ruby
Webdev with too much free time on her hands
huzzah! by the power invested in me through CSS Grid, this template should work a good bit nicer with spacing at different widths. i am going to try and pad this out with a bunch of text so that it becomes long enough to demonstrate that the image stays pinned to the bottom of the box. ah there we go we did it. nice. anyways template in the details below for the curious. the spacing between image and text is still a little inconsistent but i will fiddle with that tomorrow when it is not over an hour past my bedtime.
ok i have done the fiddling and the spacing between text and image will now always be consistent yay. might see about making a generator website for these, that could be a fun little project.
source template (tweaked version of this post for better responsiveness)
template code
<div style="display:grid;grid-template-columns:repeat(6,minmax(0,1fr))">
<div style="grid-column:1/6;grid-row:1;background-image:linear-gradient(rgb(102,202,218) 0%,white 80%);border:4px solid rgb(42,42,42);border-radius:5px"></div>
<img src="{image url}" alt="{alt text}" style="grid-row:1;grid-column:5/7;margin:0;align-self:end">
<div style="grid-row:1;grid-column:1/5;padding:15px;color:rgb(42,42,42);font-family:"courier-std",courier,monospace;font-weight:bold;line-height:1.25rem;text-align:justify;width:100%">
<h1 style="font-size:1.5rem;margin:0px">Name</h1>
<h2 style="font-size:0.8rem;font-style:italic;margin:0px">Tagline</h2>
<p style="font-size:0.9rem;margin:0px">Post content goes here</p>
</div>
</div>
<p style="margin: 0; font-size: 0.7rem; text-align: right;">
<a href="https://cohost.org/srxl/post/6299109-div-style-display">source template</a> (tweaked version of <a href="https://cohost.org/werewolfbarista/post/4598597-img-style-position">this post</a> for better responsiveness)
</p>customizations:
- don't forget to replace
{image url}and{alt text}with the desired image - the
background-imagecan have the colours changed to whatever gradient you want, or replace it withbackground-colorfor a solid colour fill - just about all styles in the text can be safely tweaked to change spacing, font, or colour
- you can almost certainly get away with a lot more, if you're a css nerd

