« Helping each other Forum

Helpp pleassee [IDK how to code]

Does anyone know how I can make my profile look like this? I made it with the F12 thing but idk how to actually codify it or smtg bcs I've never coded in my life


Airy-yeaaah


Report Topic

1 Reply

Reply by suki

posted

don't worry, HTML and CSS get easier the more you use them :)

so if I'm not mistaken, you want it to look something like this?


here's how I did it on your current page. I've added comments to hopefully explain what each part of the CSS is doing, but feel free to ask me any questions.



/* arrange interest table items vertically (so the titles go above the content) */
.details-table {
display: flex;
}

main .left > div:nth-child(6) .details-table tr {
display: flex;
flex-direction: column;
}


/* hide title in first row so the image doesn't get pushed to the right */
main .left > div:nth-child(6) .details-table tbody:first-child tr:nth-child(1) td:nth-child(1) {
display: none;
}


/* style headers */
.table-section:not(:last-child) .details-table tr td:first-child p {
letter-spacing: normal;
}


/* remove original text that gets replaced with :after */
.table-section:not(:last-child) .details-table tr td:first-child p {
visibility: hidden;
}


/* make new :after text visible and correctly positioned, can also style it more here */
.table-section:not(:last-child) .details-table tr td:first-child p::after {
visibility: visible;
display: block;
}


Report Reply