Portfolio page layout

Portfolio page layout
0

#1

Hey guys, im using flexbox to create my portfolio layout. My front page with be laid out in the format shown in the given codepen. Howver, I have a couple things Im having trouble tweaking. Could someone first tell me how I can get my name text to take up on line (vertically) in the blue container. It should stretch the full height of the screen. Right now for some reason my name is being spit into two lines.


#2

I can see that your text is wrapped into two lines after re-sizing screen. You can force text to be in one line by adding [white-space: nowrap] option to your .name class in CSS sheet.
like this:

.name{
display: flex;
transform: rotate(-90deg);
background: pink;
white-space: nowrap;
}

Good Luck!


#3

Also, now that I look at it. Its will not look right unless its full screen but the blue container that holds my name is what Im referring to. That will run the full height of the screen vertically.


#4

That worked however now when I try to increase the size of the font, the container expands. Is there any way to get it to fit inside the container without it expanding?


#5

The size of the pink container increases when I uppercase my text as well. I would like the blue container to stay the same size and the name to fill it. I just cant seem to make that work