Streaming live at 10am (PST)

Confused to why this is happening...Please help!


#1

Hello,
So I am not sure why this is happing. I used the same template for two different pages. On one page the type within a div breaks to multiple lines as expected, and on the other page, the type does not break to another line but gets cut off. The settings are identical for each page so I am confused as to why this occurs. I would expect that the word "infographics" would simply be hyphenated instead of being cut off.

Can anyone offer a solution / help? Reducing the type size is really not an option, I am sure I am just doing something wrong.


Here is my public share link: LINK
(how to access public share link)


#2

I hope @vincent doesn't mind being pulled into this..
But if there's someone that understands how to fix that, is Vincent :stuck_out_tongue:

He fixed it once for me, when I didn't even know why it happened..

Meanwhile @kbowman can you share your read-only link?
https://forum.webflow.com/t/how-to-enable-a-webflow-share-link/2573/2?source_topic_id=44094


#3

Oh sorry, I forgot to do that. I've added the link. :slight_smile: Btw, is there a way to link to a specific page with the sharable read-only link? Not sure if that's a dumb question or not, but it always just opens the site on the home screen, which might make it difficult for someone to find the page with the actual issue...


#4

Fair point there..
I'm no actually sure if there is.. normally we go to the home page and try to find out where the error sits :stuck_out_tongue:

I'll have a look now (it shouldn't be difficult to get to the pages :slight_smile: )

Edit: sorry, we can actually see the page on the top right of your screencaps.. :slight_smile:


#5

Thanks! I greatly appreciate any help! I am almost done with updating the site to CMS (which I love so far) and I ran into this issue. It's driving me nuts so close to being finished!


#6

Well..

I was able to make "Infographic Design" break... But I still can't get that ALC one... :L
I set the max width to 100% (usually solves it), but I can't find anything wrong with the Heading 3 :confused:

I hope someone will be able to fix that one for you, sorry :confused:


#7

Thanks! Yeah I just don't get it. It's driving me mad. I'm a designer, but I love Webflow because as I build these pages, I at least am getting some foundational knowledge. Unfortunately, I just don't know enough to be able to address things like this and then I waste so much time to figure it out.


#8

Words don't break. Sentences do. So "Infographics" will never break. If you have long words they need to all fit in the width.


#9

I should have seen that one ..


#10

Ok, I am thinking maybe I need more coffee, but what do you mean by sentences break but words don't? How is one different than another? I am guessing I am being dumb right now, but I still don't understand.

I guess what is confusing me is that every program from Google Docs to Photoshop that I use, when type reaches the end of whatever bounding box contains it, will break to the next line, whether it is by hyphenating a word or simply dropping the whole word to the next line. I have never come across something where it just gets cut off.


#11

It breaks between words only


#12

They have a library for breaking words in a clean way.

You can test that with custom code:

https://www.w3schools.com/cssref/css3_pr_word-break.asp

It works in Webflow of course

But word breaking shouldn't be done like this. This is an improper break. Should break before the p or after the "i".

That's part of the reason you never ever justify text on the web. Because browsers have no clues what the text is made of and will be incapable of breaking properly thus maintaining an even space between words. The results are horrendous.


#13

I need to borrow Iggs gif... D'oh. Thanks for the help! I get what it was doing, but I didn't understand why it was doing it. This is a big help, thanks!


#14

No no no :slight_smile: But now you see the difference between a program that has a database to handle typography and a dumb system that is HTML.


#15

Seriously thanks! I would have never understood, but now I get it. So for now, I will re-word the title to something that will fit!


#16

But anyway wait!

We're spending time on the wrong issue.

The issue is you're styling a TITLE ELEMENT and you are going to allow a word to break? Readability of titles is essential and not always a question of size. One rule should be don't put words that could be longer than the container the title is in. So your longer word must always fit. So just do that, adapt the size of the title for this device, for any word to fit.


#17

Or you can just reduce the font size :stuck_out_tongue:
Thank for the help @vincent :heart:


#18

Yes, I could adapt a character count, but that is always the problem with responsive design. Changing the one header size will have effects on the modular type scale for the rest of the site.

So if 98% of the titles fit and look great at say 2.5 em, but there is one title that doesn't fit and only will work if reduced to 1.75 em, I can't justify making all the other's 1.75 and reduce the visual impact to get it to fit.

BUT, now that I understand how it treats the flow of words, I can better plan for it in the future. I greatly thank both of you for your help, it has saved me a lot of potential wasted time today!


#19

No, only for this device. Chages you make on lower devices don't propagate up. (just in case of...)


#20

That's true. I guess I meant from a visual standard. It's wonky to me if you visit one page and the header is one size, but then on another page it dramatically changes in size. The lesson here is definitely live by content first and plan ahead. :grin: