Need text to responsively scale up/down with widow width.
Seems like it should be trivial. But can’t figure out how to get Blocs to do it.
Help.
1 Like
Since CSS3 we’ve had these viewport size units: vw, vh, vmin. These allow you to scale anything including a font size based on the viewports’ width or height. ex.
5vw = 5% of the viewports width.
But lucky for you there’s a custom bric that does exactly what you want and more. 
1 Like
Thanks downloaded it. But I get an error when trying the demo
Haven’t seen this reported before. before I take a look can you tell me which version of Blocs for Mac you are using? Thanks.
latest version. 3.2.4
I guess a view more brics from the store are effected since the rearrangement of the core js to the footer since version 3.2.3.
Moving the JS to the footer shouldn’t affect my brics. My JS is in external files attached using the API. Are you having this issue as well @pixelwork ?
Just thoughts because I have the issue with other brics.
No, I haven´t installed yours yet.
Any thoughts. When I use the brick in the carousel, it doesn’t work until your resize the window
I take it that the initial issue is resolved. I was never able to duplicate it.
As for the carousel, I haven’t tried it with elements in the Carousel, it’s possible it works there but also possible that it doesn’t work great there.
The first try change the way the bric calculates the resize:
Change “get width” setting and see if that helps. I’ll find some time to look into it.
In Blocs 3.5.2, when I double-click “TextBloc-Hero.bloc” in the Finder, it opens but gives me this error dialog:
I’d try reattaching to the resources folder where the bric is on your harddrive (click the arrows in the screenshot)
If it continues to ask every time you open it, it’s most likely a Blocs bug. I’ll let’s see if anyone else experiences this. I myself am not able to reproduce it, but other may be able to and we can find a pattern.
1 Like
That dialog hasn’t reappeared but I cannot get it to work. I don’t have any instructions, so I cannot say if it is me or the fact that textblock.min.js (wherever THAT is on my HDD, I have no idea) was missing at one point.
I created a fresh document, then made a Row > Column and added TextBloc inside that column. I also then added a Paragraph within that same Column, and gave it a Class of “h1”. I then Clicked once on TextBloc on the page which shows me settings in the right sidebar. Under “Target 1” I used these settings just for a test:
When I preview in Blocs or the browser, I see no change in the text size as I change the window width. The text size remains the same, which shows me TextBloc is NOT working.
So again, I don’t know if it is me not knowing how to properly use TextBloc or if it is that missing textblock.min.js, which again, I have no idea where to find on my hard drive.
Thanks.
You’re missing the selector (.) in front of your classname.
.h1
#h1
1 Like
I am curious on this one @Whittfield,
Why h1 would need a selector when its an element, which don’t need selectors.??
Hey @PeteSharp,
According to the comment.
I also then added a Paragraph within that same Column, and gave it a Class of “h1”
if he were truly targeting an h1 tag then you’d be correct, but this example is a paragraph with the class h1.
1 Like
Gotacha, thanks. 
1 Like
Thanks. That change got it to work! 
I don’t understand how the minLineHeight and MaxLine fields work, but if I leave those blank, I see the font size change just find across breakpoints, so I guess it’s okay to use it that way.
After much testing, I must unfortunately report that the font size in XS is not stable/consistent/reliable. Merely scrolling up and down on an iPhone can trigger a font-size change, as does rotating from Portrait to Landscape and back again. An example is shown in the animated GIF below where I am using TextBloc to control the font size of the two 1480-DR model numbers via the same Class applied to the Span on each.
Here’s an example Blocs 3.5.3 document which you can test on a real iPhone or in the Xcode “Simulator” app on your Mac: TextBloc_Problem.zip (41.2 KB)
(Note: That document crashes Blocs 3.5.3 for some unknown reason when I double-click it in the Finder under High Sierra, but if I launch Blocs and choose Open and open the document that way, all is well. I mentioned this because you may have the same problem.)
If you’re wondering how I came up with minFontSize=45px & maxFont=200px, well I spent a LOT of time with trial and error before I decided upon those two values. With other values, the font size doesn’t look right across all the break points.
Why do I even care? Consider the model number in my example document. Before using TextBloc, what would happen in XS is the model number would do a line-break at the hyphen on some smaller iPhones because my chosen fontsize of 50px is too wide for very tiny iPhone screens like the iPhone SE. Allowing the model number to break into two lines in XS looks bad to me. I don’t want a line break to happen on small screens. But if I just avoid using TextBloc altogether and just set the fontsize in my Class (in XS) to an even smaller font size (which would be a FIXED font size in the XS breakpoint), then on larger screen iPhones that text looks too small (in XS).
Basically, I want the font to scale in XS to (1) prevent the line break and (2) to get a nice looking font size regardless of the smartphone screen size. I don’t care if the text in question scales in the other breakpoints because it will never do a line-break in those breakpoints. But again, TextBloc has font size consistency issues that prevents me from being able to use it.
Any thoughts?