New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
FitText on Multiple, shared constraint #18
Comments
Can you supply a code sample of what you're explaining. I was able to create a sample of similar description (http://jsfiddle.net/3Xr8L/), but all the |
Hi, Maybe I've misunderstood, but see http://jsfiddle.net/ku6eg/1/ Thanks, |
Ahhh, FitText doesn't just auto-fill the parent container, it's designed for scalable text. You might want to check out BigText, I think it'll do what you're asking for. If you want FitText to fill more of your |
Ok, I did misunderstand then ;) I'll have a play around a bit more. Thanks. |
I'm attempting to use fittext with consistent text sizes in four inline-blocks. It seems to mess up on load but fixes itself on resize. Has anyone else experienced this problem? For some reason the text in the last box appears larger than the rest. |
@laurend Can you put a code sample in a jsfiddle? That would be the quickest way to debug this. Thanks. |
http://jsfiddle.net/laurend/dULXN/26/ ... it gets smaller on the subsequent instances of .service. |
were you able to take a look at that fiddle that I posted above? I'm now experiencing the shrinking effect on yet another site with repeating hed classes ... any help would be much appreciated! |
Sorry. I thought you said "not exhibiting the behavior that i described above", so I was waiting for more news.
Essentially the order at which you execute fittext() matters. You'll need to execute it before you do your tabs. If you try to fittext() a hidden element, the browser assumes it has a height and width of 0. You'll also probably need to reapply fittext() everytime a tab is shown. Working on a solution for this.. http://jsfiddle.net/dULXN/32/ - here's your fix |
aha. thank you! I'm still having issues with mysteriously shrinking hed classes, though -- the problem that I still can't reproduce in js fiddle. I ran into it again on another work-in-progress site. It's only happening in Safari. Here is my correctly-functioning js fiddle reproduction: http://jsfiddle.net/laurend/FE8Ju/20/ and here is my broken demo: http://www.davidberlow.com/index.php/index_b. It fixes on resize but when there are four subheds shown (in the narrower widths), the last one is set to the min fittext size. This could have something to do with the fact that I hide that child in the 3-col wider layout, though if that were the case as it was before, shouldn't it render properly upon loading at the 2-col width? |
❤️ Hmmm... that is peculiar. In Safari it's acting like it's not even apart of the DOM, or it's applying fitText mid-render, which is weird and should be impossible. If it's not too much effort, it might be worth going with a Mobile First |
Ok, thanks for the insight! I'll give that a shot and report back. |
reordering the media queries with min-width didn't work ... but this did: I moved the nth-child(4) {display:none} style out of my main styles and down to a min-width = 1251px at the top of my max-width media queries list (in which the largest query is 1250px). I'm assuming this discrepancy has something to do with performance and rendering ... no quick stack overflow or google searches answered my question as to why but I'm sure an answer is out there. Thanks for suggesting to mess with the media queries, though! |
Hi,
It would be useful to be able to apply FitText to multiple elements (of the same style), and have all of them use the maximum size of any one.
If applied to 3 elements, whatever the smallest size is for any of them once resized, should apply to all 3 so the size is consistent across the elements.
Good work though, enjoying this.
The text was updated successfully, but these errors were encountered: