Need help? Check out our Support site, then


Bushwick theme breaks with long titles and long blog name

  1. 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:
    "Diego
    Escalante
    Urrelo"

    It hyphenates:
    "Diego Es-
    calante Ur-
    relo"

    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:
    http://diegoe.be/2013/07/29/charly-cass-en-el-hard-rock-cafe/

    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')
    en el
    Hard Rock Cafe"

    Probably expanding the featured image vertically based on text height would be the fix. No idea.

    Thanks.

    The blog I need help with is diegoe.be.

  2. Hi there,

    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.

  3. Hi,

    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.

  4. Thanks very much. This should be fixed for you now. :)

  5. 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":

    http://imgur.com/zzY6y6d
    (OSX + Firefox 26)

  6. Hi Diego,

    I don't see this problem on my phone anymore. Can you try clearing your cache?

  7. 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:
    http://imgur.com/24M6jVy

    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.

    Thanks!

  8. 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:

    Screenshot: http://imgur.com/wrGiOvs

    URL: http://diegoe.be/2012/04/21/removing-the-hiddensystem-bit-of-vfatfat32-files-on-gnulinux/

  9. Hi Diego,

    Yes, the post titles will still wrap depending on the length and the size browser window you are using. That's intended.

  10. 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.

    :-)

  11. Here's a comparison of how it looks on my Android after the fix from earlier today, and how it looks on my desktop:

    http://imgur.com/lsjq5bk

    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.

  12. 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.

  13. 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.

  14. 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!!

  15. 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.

  16. I'm using:

    - 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)

  17. 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.

  18. Howdy @diegoe!

    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. :)

    Cheers,
    Caroline

  19. Hi there our site does not work well on any mobile. http://www.revelstoke.com

    Can you assist?

    thanks!!

  20. 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.

  21. Hi Caroline,

    I seem to still see problems regarding title position and size. Would you like me to produce more screenshots?

    Thanks :-)

  22. Could each of you who is still having trouble with Bushwick please provide 2-3 screenshots showing examples of the issue. For each screenshot, please give corresponding:

    - device/platform & version (i.e. iPhone iOS 7.0.4), browser & version (i.e. Chrome 32) - link to the specific post or page in the screenshot

    Thanks for your help.

  23. Hello Kathryn,

    I was able to reproduce the landscape problem where the title overlaps with the content. Even when such title is not so long.

    Test URL: http://bushwickdemo.wordpress.com/2011/07/07/free-and-priceless-at-the-same-time/

    Screenshots: https://cloudup.com/ceN8iAH2fpE
    Note that most are _scrolled down_ a bit to show the affected area.

    Landscape screenshots:
    - Chrome 32.0.1700.99 (Blink 537.36 @164914) on Android 4.1.2
    - Firefox Mobile 27.0 on Android 4.1.2
    - Firefox 27.0 in responsive design mode on OSX 10.7.5
    - Chrome 33.0.1750.117 on OSX 10.7.5

    Chrome on OSX exhibits plenty of the issues when resized, but to be fair I was able to reproduce the same thing with a "liberally" resized Firefox. I'm attaching both for reference.

    Also included are screenshots for a less severe portrait mode issue.

    The fully sized theme aligns titles to the bottom of the featured image area (the grey area). On mobile it seems the text is shrink and kept top aligned. This creates the empty space seen in the screenshots.

    If I remember correctly, this was modified to prevent the overflow I originally reported. But it breaks the visual identity of the theme.

    Portrait screenshots:
    - Firefox 27.0 in responsive design mode on OSX 10.7.5
    - Firefox Mobile 27.0 on Android 4.1.2
    - Chrome 32.0.1700.99 (Blink 537.36 @164914) on Android 4.1.2
    - Chrome 33.0.1750.117 on OSX 10.7.5

    I hope this helps. Let me know if I my text wasn't clear, I reckon debugging this things can be like playing online charade+Pictionary :-)

  24. Diego & revelstokebc - thanks very much for the info & screenshots, I've passed them along to our developers so they can investigate further. We'll keep you posted here.

  25. PS I'm using Bushwick

  26. hi Kathryn,

    Sorry for the later response... I didn't have an opportunity to reply earlier. Here are my examples on a different platform:

    iPhone 4S, iOS 6.1.3, Safari built-in browser.

    Screenshots of site title and tagline overflowing can be viewed at:
    https://www.evernote.com/shard/s9/sh/1839a19b-e41b-4c5d-b8e9-2062a2acf56a/fa7a8fce165bc46b00807f86a78e6923

    #1 is landscape (regular view)
    #2 is landscape (full screen view)
    #3 is portrait -- provided solely for comparison -- site title and tagline display perfectly in this orientation

    Thanks for all of your help!

  27. Ernie - thanks for your screenshots, I've added them to the report.

    ocarls - would you mind please starting a new thread for your issues? I'd like to investigate them separately as the missing header image in particular is very different glitch the other issues being reported here, and it will be easier to troubleshoot with you in your own thread. Once you've started the new thread, please come back here and add a link to the new thread so I'll see it. Thanks.

  28. The title and tagline should now display better on mobile devices.

    If anyone is still seeing an issue after clearing your browser cache, please provide a link to the post/page, your device/browser/version, and a screenshot. Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic