Streaming live at 10am (PST)

Text size scaling & vertical alignement needed


#1

Facts, there is 4 view resolution workspaces.

Desk & Tablet
Phone Landscape & Phone Portrait

Right now i'm programming an complex column based page.
I did design in the Desk view - it's all cool.
Than, I did my custom thing in the tablet view - it's all cool.

When I look as a POV user, the resolution stick in desk, than switch in tablet without scaling. IT'S A GOOD THING because I design in PX and place my texts relative to my pictures in PX.

At this point, it's all good.

But … when I go into Phone Landscape / Phone Portrait problem appears … now the responsivement scale automatically, and don't stick as the tablet POV.

My problem is that it's impossible to design my text position in the space. I have to design in PX as the scaling occur in %. I'm screwed frowning

Possible Solution #1) Can I place my text position in a % ?

Possible Solution #2) or ... could I choose the have my Phone Landscape & Phone Portrait resolutions sticks like the tablet does. That would really save the day !

See this video cast ... http:// cl.ly/1F2y0e351c1i (remove the space)

Thank you !


#2

Ohh, vertial align would help but I never seen the option in Webflow.


#3

OK and here in a 2 min build project ... video cast (put http) http://cl.ly/2X2o3B2m1w3b

The problem is vertical-align for text.
Thank you !


#4

Thanks for the videos they really helped explain your problem. I think instead of using px for padding/margin of the parent container which px is the only allowed option right now, use % based div spacer for vertical alignment. Use the same value for both line-height and font-size and then since you are using px based rule for the default layout, base your % off of that. For example, if the container is 200px in height and your font is 150px the difference is 25% X .5 for the top padding...which is 12.5% but since you can'y apply that to the container padding, add a div block above the text, give it a class and set its height to 12.5%. Haven't proven this theory but its a thought.

playing around, give this a try - http://helperwebflowcom.webflow.com/


#5

Philip,

I'm blown away by what you did ! I see that you really took time to resolve this wink
I will try to recreate your solution right now. May I PM you if I have other interrogations ?

Now at least, I know it's feasible so I can not blame anyone else than myself stuck_out_tongue

Thank you !

Pascal


#7

Philip,
In your example, do you use black square pictures OR background color as frames ?

Thank you !
Pascal


#8

@pingram3541 I just send you an email. Talk to you soon. Thanks !
Pascal


#9

In my example, the spacer is not actually needed (that was only a suggestion on how to essentially get around not being able to define % based padding or margin, if you really needed it). My example has fixed font-size, i.e. for the 88 its 150px so to control vertical alignment as absolute centered, I simply apply padding top and bottom of 25px. making it 200px, the size I chose for the entire block to be. The containing div scales to fit.


#10

@pingram3541
Philip, I wanna stop to say thank you ! I actually been able to do it from your explanations !

Quickly for everyone.

in a row ...
drag a pic in a colum
in position / advanced
put it in absolute

from there, there is no limit on how you can design.

Cheers !!


#11

@devmtl on my position / advanced doesn't appear to have the option for %. Am i missing something?


#12

@cmac2992 you can just type a number then add a % and hit enter. We'll be adding that in the list.


#13

Just wanna say thank you for existing. Exactly what I needed!


#14

I am looking to vertically center align pieces of text with dynamic line numbers (1, 2, or 3 lines). Using the solutions outlined in this thread, I am only able to align a dynamic lined block of text on either side (top aligned or bottom aligned) rather than vertically center aligned.

Is there any way to vertically center align the names on the Communities page of my webflow site? Here's the link: https://preview.webflow.com/preview/wishdish?preview=6c8cfa209eda7b29260b445d3ee27dde

Here's the specific page: http://wishdish.webflow.io/communities

Thanks!
Christopher


#15