Streaming live at 10am (PST)

Vertical align text in grid


#1

Hi,
I’m having a hard time trying to wrap my brain around this. How do you align vertical text in a grid. To be honest how do you align anything in a grid. I’ve tried just about everything I can think of. I have watched the videos - not really helping much. I’m wondering if there is a bug?

What I’m trying to do is run some text vertically from the bottom on the left side.

Many thanks,
John.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi you should see the grid as a aligment component/helper.
Add a grid and for each cell you want to use add a component to the cell. I normaly use div’s. Then do all styling in your div, add what you need in the div and styre the div and components


#3

Thank you,
That’s kind of what I had done but I just couldn’t figure out why I couldn’t get the text to go where I wanted using the normal methods. I’m not used to rotating text vertically. I found this post: How to rotate the text vertically using Transforms? which has helped. It was to do with setting the origin point on the rotated text div then I had to add margin to push it where I wanted horizontally. I was just expecting it to be easier and less ‘hacky’ I guess.

Anyway thanks again,
John.


#4

Just to add…figured out you don’t need to add margin, if you give the div containing the text a height of 0% it works fine?


#5

Just to note - rotating text cannot be not hacky using transforms. Transform will always push your elements out of normal css flow and proper aligning becomes an issue.