hey! so I'm working out some details in my profile template to make it mobile-friendly. this is what I have so far of the header:
Code:
[div=background-color: #fff; max-width: 800px !important; margin: 5px; border: 1px solid #fff; border-radius: 30px;][div=display: flex; flex-wrap: nowrap; justify-content: space-between;][div=flex: 0.1; margin: -5px; align-self: stretch; align-content: stretch; font-size: 45px; color: black;]〔[/div][div=flex:1; padding: 5px; margin: 5px; font-size: 30px; text-align: center; color: black;][font=Josefin Sans][b]NAME/ALIAS[/b][/font][/div][div=flex: 0.1; margin: -5px; align-self: stretch; align-content: stretch; font-size: 45px; color: black;]〕[/div][/div][/div]
what I'm trying to do is to get those little framing bits to line up with the left and right edges of the box respectively so that the name text will wrap inside them without them moving -- just stretching to match the height of the box. I've looked at a few divbox and flexbox tutorials and references and what I have so far seems like it should be correct, but it's not only not doing that, but the frames aren't even symmetrical with respect to the edge. anyone able to correct whatever I'm not doing? also I'm suspecting I have some bits of code in there that aren't doing squat so if those could get picked out and tossed that would help as well, just to clean it up
if it helps, I attempted to draw what I'm shooting for -- it's a bit scribbly, hope it's legible ^^"
View attachment 181960
and in the meantime I'm trying to pick out a font that will look kinda techno to match the intended feel of the whole template, but I don't have donator status so I can't use the fancy ones. any recommendations out of the basic set with formatting I could combine to make it look right? (I have Courier New as the stats box so I don't want to use that)
UPDATE EDIT: figured out some of it by temporarily adding small borders to each flexbox so I could see what each piece was doing, plus added a gradiant I initially wanted but wasn't sure how to do until I stumbled upon it and changed the font, again by accidental discovery
Code:
[div=background:radial-gradient(#fff, #fff, #94f9f9); max-width: 800px !important; margin: 5px; border: 1px solid #94f9f9; border-radius: 30px;][div=display: flex; flex-wrap: nowrap; text-align: center; color: black;][div=flex: 0.1; font-size: 50px;]〔[/div][div=flex:1; padding: 5px; margin: 5px 0px 5px 0px; font-size: 30px;][FONT=Handlee][b]NAME/ALIAS[/b][/FONT][/div][div=flex: 0.1; font-size: 50px;]〕[/div][/div][/div]
still can't get those frames to stretch to match the (fluctuating) height of the container tho. I've taken some looks around and it seems like that might not be possible :( but if anyone knows otherwise please help! at the very least I'd like the frames to stay vertically centered no matter the number of lines in the name