Bushwick theme breaks with long titles and long blog name
When using the Bushwick theme, I am seeing two bugs.
1. Long blog title is hyphenated.
This is a problem if your blog title is your name and you have a long name, like I do.
Instead of breaking on spaces:
It seems this is because <body> has “moz-hyphens: auto;” on its CSS declaration. Perhaps the title could have “moz-hyphens: none”. Or the body itself, considering that hyphenation is not fool proof on browsers.
2. Long post titles break on mobile
If your post title is somewhat long like here:
Then the theme breaks on mobile and the title overflows upwards.
The visual consequence of this is that you can only read:
“(lower half of ‘Cass’)
Hard Rock Cafe”
Probably expanding the featured image vertically based on text height would be the fix. No idea.
The blog I need help with is diegoe.be.
Thanks for the report. I can’t reproduce the hyphenated blog title on any desktop browser, but I do see it on mobile.
I’ve opened a bug report for these two issues.
If it’s useful I’m on OSX 10.7.5 (11G63) with Firefox 26.0
My system locale is Spanish, Firefox is set to English.
I see the hyphenation problem very often on Firefox Mobile 26.0 on Android. Wired.com is the most common example for me.
Thanks. Let me know if I can help with more details.
Thanks very much. This should be fixed for you now. :)
Thanks, I see the hyphenation problem is gone.
If it’s useful here’s an screenshot of the title overflow issue made on a desktop using the theme previewer viewport set to “phone”:
(OSX + Firefox 26)
I don’t see this problem on my phone anymore. Can you try clearing your cache?
Indeed, the mobile version is fixed on my phone.
However on the theme previewer, when the size is set to “phone” you can see the text overflow. This can also be reproduced using Firefox’s web developer tools (the viewport size one).
Here’s a full screenshot:
Admittedly, it is a corner case when a desktop user will shrink the page to that width, breakage should be expected.
However, since the bug appears on the theme previewer this might unfairly drive people away from this theme. But we could say this is a lower priority thing.
Actually I just found a case where it breaks on desktop for me. Not because of shrinking the viewport but because my title was long:
Yes, the post titles will still wrap depending on the length and the size browser window you are using. That’s intended.
I think you meant overflow?
I’m referring to the case where the (long) title is “escaping” through the top, like in the last screenshot.
I understand the design choices in the theme, but I believe that when the title goes way too long it should have a similar effect of what was just corrected in the mobile version, the size just goes a bit smaller so it can accommodate the whole title.
Here’s a comparison of how it looks on my Android after the fix from earlier today, and how it looks on my desktop:
I believe the right thing would be to apply the same logic that Android is now applying and make the title smaller if it’s going to overflow.
Ok this seems to have serious problems on mobile.
Check this out: http://imgur.com/qLMBcGw
Chrome is even worse, the title is not even displayed.
I’ll change my theme for now, let me know if you want me to test again or chime in on the bug#.
Thanks for your help.
I am having the same problems as diegoe. Based on your comments, eurello, I presume the hyphenation issue is resolved. However, I also still have the overflow problem where the first part of my blog title is not even visible because it disappears above the top of a phone browser view. Diegoe’s example above is representative.
Hi Diego and Ernie,
Ok, I see what you mean. Can you both please clarify for me the exact devices, operating systems, and browsers/versions you see this in?
For example – Chrome v. 31 on Mac desktop, OS X 10.8.4
Those details would be very helpful for passing along to the theme developer. Thanks!!
Thanks for the response! The biggest problems I am seeing are in these cases:
1) Site title overflows through the top on built-in Safari browser on iPhone 4S, iOS 6.1.3 in both portrait and landscape modes. Same issue on Mercury 8.1 browser on same device in landscape mode only.
2) Blog post title overflows through top on Safari and Mercury on same device in landscape mode only.
– Firefox 26.0 on desktop OSX 10.7.5
– Firefox Mobile 26.0.1 on Android 4.1.2
– Chrome 32.0.1700.99 (Blink 537.36 @164914) on Android 4.1.2 (same phone)
Thanks! I see that the long site title is partly covered up by the admin toolbar when logged in on mobile (I was only looking at it logged out before, oops). I’m reporting this to the developers.
Diego, I’m still not able to reproduce what you describe in Firefox or any other desktop browser, though, only on mobile.
Just a note to say we’ve made some changes to Bushwick to improve the site header appearance on mobile devices with small screens. I hope this helps. :)
Hi there our site does not work well on any mobile. http://www.revelstoke.com
Can you assist?
Hi! I’m using the Bushwick theme, I am having a hard time ,The blog title was too large and cutting in and it goes on both sides. I need help to fix this pls. I was hesitant to post the blog because of this. Pls help.Thanks.
The topic ‘Bushwick theme breaks with long titles and long blog name’ is closed to new replies.