Title H1 Breaking Template
Hi, I’m hoping you can help with my title H1 breaking the lay-out (image 1) on mobile on a few pages (i.e. http://dev.classics.yale.edu/undergraduate/major-classical-civilization). An appears to added between the 2 last words automatically to avoid widows and I’m not able to override it (the sentence should break to 3 lines on mobile). Image 2 (http://dev.classics.yale.edu/research/workshops/classics-work-progress-workshop) shows a different page with no widows.
There’s a second problem. When I experimented with adding some text to the H1 for the first page, I discovered that it breaks the page, resulting in image 3 (right sidebar gone!). A similar experiment with the second page (image 4), where there was no added, shows that the H1 breaks fine on that page.
Is there something obvious I’m not seeing?
I forgot to attach the images–here they are!
Hi Bjorn I’m working on editing the problem you have experienced with. Can you please clarify below questions. A screenshot picture would be great!
Thanks
- Chao Hang Lu -
Hello Bjorn,
Once of the interns added some CSS to fix your 1rst issue. Can you give it a look?
Josue
Hi Josue,
I actually also tried word-break:break-all, but it breaks words in odd places…. so if there was any other way to override the that would be better. If there’s no way to do it, we’ll likely try and see if we can rethink the approach to the H1’s, though we’d rather not go that route.
B
Hi,
The 3rd and 4th image shows the problem, but I’m reattaching them here. #3 shows a longer heading, resulting in the 2nd (right) sidebar disappearing. This particular page had the automatically added between the “CLASSICAL” AND “CIVILIZATION” in the title, as I decsirbed in the first problem. When I experimented with a bit more text (as visible in the “MORE TEXT” ending), the right sidebar vanished…
Curiously, as attachment #4 shows, long headlines doesn’t have the same effect on certain pages. The difference; the in the title which is automaticcally inserted.
Let me know if anything is unclear and thanks for your help!
Bjorn
Hi,
I’m meeting with my client next week and hope to have a possible fix, or work-around, by then. So far my understanding of what is going on with the strange title/H1 behavior is that an   is automatically inserted in H1 through P to prevent widows, possibly with a server-side JS… is that correct? It would make sense, but may result in some titles/H1, displaying awkward breaks (see nbsp.png). And in some cases, certain 2-word titles (but not all!) combinations causes the right sidebar to disappear altogether (see broken_template.png).
Is there anything we can do to prevent this? The word-break:break-all; works but creates another problem. If there’s no fix, we’ll probably have to re-write titles in some areas. This is a little unpredictable as we have no idea why certain word combos will wreak havoc with the template.
http://dev.classics.yale.edu/undergraduate/major-classical-civilization
http://dev.classics.yale.edu/graduates/graduate-programs/classics-and-comparative-literature
Thanks for your help!
Issue Resolved offline.