Hullo, it's me again!
I've finally decided to work on making my own HTML DnD-based profile and it's turning out better than I thought! The only problems for right now are that I'm worried that I can't find a solid way to keep the div containers on the same row all the same height as well. Along with that, I'm not entirely sure which parts I should keep in in relation to the character sheet, and which parts to leave out altogether to keep it from getting too cluttered or boring.
I'll use the Test build that I'm working on as an IC for this forum post.
I'm hoping this is the right forum to ask these questions, but I've never been super good with knowing where to put things so if I need to ask something somewhere else just hmu! Thanks yall!
There should be a display flex option for that. I think it was justify-content or align-items or something like that. But only if you are using display flex. Maybe something like this: https://css-tricks.com/almanac/properties/a/align-items/
By the way, I also have a DnD template I made available for others. Feel free to borrow ideas from it if you find it useful. I built it with a tool though, so maybe the source code might be more useful.
@SchwarzerAlptarum Woah that's a sick DnD Template?? I might take a peek at the source code if that's OK with you just to see how you got everything the way you did.
But oh man, I don't think I've ever heard of display flex before, and fiddling around with it doesn't seem to be doing anything so I don't think I'm putting the code where it should go? Do you have any other side recommendations or examples?
Yes, feel free to use or look at the source code.
Here's a codepen for the equal height thing. But without actual code from you, it's hard to know what you have and haven't tried.
@SchwarzerAlptarum OK, so here's the base code that I've drawn up. It might not be the most clean or effecient, but I'm hoping it's at least easy to read. The only permanent CSS code fixture that I've used is what's being used to align the header text to the center. For the row aligning I've tried using examples of .row-equal-height CSS, I've tried including the EqualHWrap to see what that does, I've tried deciphering how W3Schools describes things, and so far I haven't the exact way of doing it.
Okay, so I think what's happening is that the columns in your row are the same height; the problem is that the cards you're using don't fill up the entire height of the container. So I added some extra styles to your col-lg-#'s (the containers that contain the cards): display: flex; flex-direction: column; I replaced the < br > tags with margin-bottom, so I don't know if it will work with the line breaks you had in there originally, but try with margins if it doesn't.
Also, there's some errors in your markup. The age < b > tags don't close properly. You're missing the slash.
@SchwarzerAlptarum Oh!! OK so I think I might be beginning to understand what you're talking about (sorry my reading comprehension with coding is,,,, on and off). Idk what you mean by you saying that you added extra styles, but I might understand what you're describing? I'm assuming that you put the {display: flex;} and {flex-direction: column;} in the CSS bit right? I erased all of the Breaks and instead put {margin-bottom} in the CSS under a div selector, so I definitely got something to change with that! For the flex code, what selector code would I connect that too? I tried adding it onto div as well but it kind of just high key broke everything by jamming it onto the left of the screen. Aaaaaaaaa thank you so much for trying to help me with this though! I really appreciate it - sorry if I'm being kind of difficult. QwQ
If you gave your divs more unique class names, it might help me tell you which divs they are. There's some col-lg-1, col-lg-2 and col-lg-3 divs in the fourth outside row div, which was what I thought you were trying to change. If you put the flex stuff in each of those divs, then it should work.
I don't actually know what the CSS features in premium accounts are supposed to look like, so you have to add those styles to style="" attributes or make your own classes for them.