Traverser#824|The Ally|Autobot|Knight of Doom
- Roleplay Invitations
- Group Roleplays, One on One Roleplays
- Posting Speed
- A Few Posts a Week, One Post a Week, Slow As Molasses
- My Usual Online Time
- my schedule is very flexible (probably more than it should be tbh) but my best times are generally 4pm-9pm M-F and 12pm-9pm weekends
- Writing Levels
- Intermediate, Adept, Adaptable
- Genders You Prefer Playing
- Male, Female, Androgynous, No Preferences
- Playing Style- Passive or Aggressive
- passive leanings at first, aggressive leanings once familiar
- Favorite Genres
- fantasy, sci-fi, superheroes, action, adventure, combat, science fantasy, supernatural, hurt/comfort, modern fantasy
Thanks so much for the reply! I was starting to think no one was ever going to answer this ;^; it's still not doing what I want tho -- comparing your code to mine, it's now stuck at a height that's obnoxiously huge on larger screens so still not adapting to screen size :( I'm wondering now tho if it might work better actually to stick the frame in the background itself, as a transparent image over the gradient. not sure if it'd let me layer backgrounds like that tho. maybe I'm just left with discarding the frames altogether :/ thanks for giving your feedback tho!Sorry for the late response! Anyway, looking at your question the first thought that came up was to use the font-size:(calc). However, after testing it myself I have found that the formula doesn't work anymore, so I had to do some research on responsive texts and how to create them. From there I have found the next best solution, I suppose.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:
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 still not doing what I want. at the very least I'd like the frames to stay vertically centered no matter the number of lines in the nameCode:
[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]
if it helps, I attempted to draw what I'm shooting for -- it's a bit scribbly, hope it's legible ^^"
View attachment 181960
[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: 10vmax; ]〔[/div][div=flex:1; padding: 8% 0% 12% 0%; font-size: 4vmin;][FONT=Handlee][b] NAME / ALIAS [/b][/FONT][/div][div=flex: 0.1; font-size: 10vmax; height: 100%;]〕[/div][/div][/div]
guide I used: Font size relative to the user's screen resolution?
What I did was switch out your font-size to a viewport (v) rather than pixels (px). Read the discussion I linked above for more information since it certainly is useful for when you want to create responsive texts! Hope that helps!