Help Idk what to do

[koala]

Hey ho. I don't normally go on help threads because I can usually figure what the issue is. I apologize for my messy code beforehand!!!

The Problem: The text content isn't listening to display: flex and flex-direction: column. I'm sure I'm just missing something because I'm tired but any and all help is appreciated.

[class=container] min-width: 300px; max-width: 595px; min-height: 395px; margin: auto; background: white; [/class] [class=row] display: flex; flex-direction: row; [/class] [class=s1] width: 195px; height: 195px; background-image: url(https://i.pinimg.com/564x/8f/d4/3d/8fd43dc2844c400744a77b995f619292.jpg); background-size: cover; float: left; cursor: grab; [/class] [class=s2] width: 195px; height: 195px; background-image: url(https://i.pinimg.com/564x/27/fd/8a/27fd8acfdebb931728b4b658d797ac19.jpg); background-size: cover; margin-left: 5px; cursor: grab; [/class] [class=s3] width: 195px; height: 195px; background-image: url(https://i.imgur.com/gH81aTX.jpg); background-size: cover; margin-left: 5px; cursor: grab; [/class] [class=s4] width: 195px; height: 195px; background-image: url(https://i.pinimg.com/564x/8d/82/7c/8d827cf08e7ba17cd1b551b809560902.jpg); background-size: cover; margin-left: 5px; margin-top: 5px; cursor: grab; [/class] [class=r1] width: 395px; height: 195px; background: white; margin-top: 5px; [/class] [class=title] font-size: 45px; color: black; display: flex; flex-direction: column; text-align: center; line-height: 3; [/class] [class=subtitle] font-size: 25px; color: black; display: flex; flex-direction: column; text-align: center; margin-top: -20px; [/class] [class=contentbox] height: 195px; width: 195px; overflow: hidden; [/class] [class=content] height: 195px; width: 210px; color: black; font-size: 12px; font-family: Arial; overflow-y: scroll; padding: 5px; [/class] [class=watermark] font-size: 10px; text-align: center; [/class] [class=cool1] height: 195px; width: 195px; background: white; display: none; cursor: grabbing; [/class] [class=cool2] height: 195px; width: 195px; background: white; display: none; cursor: grabbing; [/class] [class=cool3] height: 195px; width: 195px; background: white; display: none; cursor: grabbing; [/class] [class=cool4] height: 195px; width: 195px; background: white; display: none; cursor: grabbing; [/class] [script class=s1 on=click] slideToggle 900 cool1 [/script] [script class=s2 on=click] slideToggle 900 cool2 [/script] [script class=s3 on=click] slideToggle 900 cool3 [/script] [script class=s4 on=click] slideToggle 900 cool4 [/script] [div class=container] [div class=row] [div class=s1][div class=cool1][div class=contentbox][div class=content] NAME | Grayson Micah Edwards NICKNAME | Gray, Micah GENDER | Cismale AGE | 18 DOB | May 2nd POB | RP Setting OCCUPATION | Senior Student JOB | N/A FC | Jaron Baker HEIGHT | 6'1" HAIR |Curly brown hair EYES | Blue-green MODS | Pierced ears STYLE | Gray has a love for accessories and dark colors. [/div][/div][/div][/div] [div class=s2][div class=cool2][div class=contentbox][div class=content] LIKES| DISLIKES | SKILLS | cooking, skateboarding, longboarding HOBBIES | cooking, studying astrology and astronomy FEARS | QUIRKS | scratches the back of his head when uncertain, scratches his nose when nervous or shy, crosses him arms to show authority [/div][/div][/div][/div] [div class=s3][div class=cool3][div class=contentbox][div class=content] VICES | VIRTUES | PERSONALITY | BACKGROUND | FAMILY | [/div][/div][/div][/div] [/div] [div class=row] [div class=r1][div class=title]GRAYSON EDWARDS[/div] [div class=subtitle]subtitle goes here[/div][/div] [div class=s4][div class=cool4][div class=contentbox][div class=content] THEMES | RELATIONSHIPS | [/div][/div][/div][/div] [/div] [/div]
[div class=watermark]Koala © 2019[/div]

Spoiler: Code

[nobr]
[comment]-------------------- visual base do not touch --------------------[/comment]
[class=container]
min-width: 300px;
max-width: 595px;
min-height: 395px;
margin: auto;
background: white;
[/class]

[class=row]
display: flex;
flex-direction: row;
[/class]

[class=s1]
width: 195px;
height: 195px;
background-image: url(https://i.pinimg.com/564x/8f/d4/3d/8fd43dc2844c400744a77b995f619292.jpg);
background-size: cover;
float: left;
cursor: grab;
[/class]

[class=s2]
width: 195px;
height: 195px;
background-image: url(https://i.pinimg.com/564x/27/fd/8a/27fd8acfdebb931728b4b658d797ac19.jpg);
background-size: cover;
margin-left: 5px;
cursor: grab;
[/class]

[class=s3]
width: 195px;
height: 195px;
background-image: url(https://i.imgur.com/gH81aTX.jpg);
background-size: cover;
margin-left: 5px;
cursor: grab;
[/class]

[class=s4]
width: 195px;
height: 195px;
background-image: url(https://i.pinimg.com/564x/8d/82/7c/8d827cf08e7ba17cd1b551b809560902.jpg);
background-size: cover;
margin-left: 5px;
margin-top: 5px;
cursor: grab;
[/class]

[class=r1]
width: 395px;
height: 195px;
background: white;
margin-top: 5px;
[/class]

[class=title]
font-size: 45px;
color: black;
display: flex;
flex-direction: column;
text-align: center;
line-height: 3;
[/class]

[class=subtitle]
font-size: 25px;
color: black;
display: flex;
flex-direction: column;
text-align: center;
margin-top: -20px;
[/class]

[comment]-------------------- pretty things and more--------------------[/comment]
[class=contentbox]
height: 195px;
width: 195px;
overflow: hidden;
[/class]

[class=content]
height: 195px;
width: 210px;
color: black;
font-size: 12px;
font-family: Arial;
overflow-y: scroll;
padding: 5px;
[/class]

[class=watermark]
font-size: 10px;
text-align: center;
[/class]

[comment]-------------------- script additives --------------------[/comment]

[class=cool1]
height: 195px;
width: 195px;
background: white;
display: none;
cursor: grabbing;
[/class]

[class=cool2]
height: 195px;
width: 195px;
background: white;
display: none;
cursor: grabbing;
[/class]

[class=cool3]
height: 195px;
width: 195px;
background: white;
display: none;
cursor: grabbing;
[/class]

[class=cool4]
height: 195px;
width: 195px;
background: white;
display: none;
cursor: grabbing;
[/class]

[comment]-------------------- scripts base --------------------[/comment]

[script class=s1 on=click]
slideToggle 900 cool1
[/script]

[script class=s2 on=click]
slideToggle 900 cool2
[/script]

[script class=s3 on=click]
slideToggle 900 cool3
[/script]

[script class=s4 on=click]
slideToggle 900 cool4
[/script]





[div class=container]
[div class=row]
[div class=s1][div class=cool1][div class=contentbox][div class=content]
NAME | Grayson Micah Edwards
NICKNAME | Gray, Micah
GENDER | Cismale
AGE | 18
DOB | May 2nd
POB | RP Setting
OCCUPATION | Senior Student
JOB | N/A

FC | Jaron Baker
HEIGHT | 6'1"
HAIR |Curly brown hair
EYES | Blue-green
MODS | Pierced ears
STYLE | Gray has a love for accessories and dark colors.
[/div][/div][/div][/div]

[div class=s2][div class=cool2][div class=contentbox][div class=content]
LIKES| 

DISLIKES |

SKILLS | cooking, skateboarding, longboarding

HOBBIES | cooking, studying astrology and astronomy

FEARS | 

QUIRKS | scratches the back of his head when uncertain, scratches his nose when nervous or shy, crosses him arms to show authority
[/div][/div][/div][/div]

[div class=s3][div class=cool3][div class=contentbox][div class=content]
VICES | 

VIRTUES |

PERSONALITY |

BACKGROUND |

FAMILY |
[/div][/div][/div][/div]
[/div]

[div class=row]
[div class=r1][div class=title][font=Knewave]GRAYSON EDWARDS[/font][/div]
[div class=subtitle][font=Meddon]subtitle goes here[/font][/div][/div]

[div class=s4][div class=cool4][div class=contentbox][div class=content]
THEMES |

RELATIONSHIPS |
[/div][/div][/div][/div]
[/div]


[/div]
[/nobr]
[div class=watermark]Koala © 2019[/div]

 

[Alteras]

I'm kinda confused by what you mean by text content not following column. While you can use flex with text, it doesn't really change anything besides positioning.

Oh, btw, remember you need to use [br][/br] for your line breaks

 

[koala]

Sorry, I realized I worded that horribly.

I basically wanted to use display: flex and flex-content: column in place of [br] because I hate typing out the br all the time for line breaks haha. I ended going with white-space: pre-line.