Bushwick theme breaks with long titles and long blog name

  • Author
    Posts
  • #1634801

    diegoe
    Member

    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.

    #1634970

    eurello
    Staff

    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.

    #1634971

    diegoe
    Member

    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.

    #1634991

    eurello
    Staff

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

    #1634992

    diegoe
    Member

    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)

    #1634995

    eurello
    Staff

    Hi Diego,

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

    #1634997

    diegoe
    Member

    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!

    #1635000

    diegoe
    Member

    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/

    #1635007

    eurello
    Staff

    Hi Diego,

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

    #1635010

    diegoe
    Member

    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.

    :-)

    #1635012

    diegoe
    Member

    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.

    #1635013

    diegoe
    Member

    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.

    #1635017

    et4media
    Member

    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.

    #1635028

    eurello
    Staff

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

    #1635031

    et4media
    Member

    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.

    #1635032

    diegoe
    Member

    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)

    #1635036

    eurello
    Staff

    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.

    #1635096

    sixhours
    Staff

    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

    #1635119

    revelstokebc
    Member

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

    Can you assist?

    thanks!!

    #1635121

    fliqchiq
    Member

    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.