WordPress.org

Forums

Bushwick
[resolved] mobile layout glitchy (20 posts)

  1. remotedevice
    Member
    Posted 1 year ago #

    Hey there,

    The theme does not work very well on iPhone, Android phone, or tablet. Pages seem to work okay, but posts break -- the whole container is narrower than usual (ie, does not span the full screen width), and the featured images load in a messy way.

    This is a real dealbreaker for what otherwise is an awesome theme...hope we can come up with a fix. I haven't been able to figure out what is causing this, but the issue arises when I load my client's site (http://kikibenzon.com) and the vanilla Bushwick demo sites as well, so it seems like it's in the theme.

    Any advice much appreciated.

    Thanks,

    Jeff

  2. Hi Jeff, I'd like to look into this, so if you wouldn't mind providing three or four links to specific posts or pages on your client's site and/or on the demo site that don't work well on mobile devices, it would be super helpful for testing.

    Thanks for your help!

  3. remotedevice
    Member
    Posted 1 year ago #

    Hey Kathryn,

    The individual posts don't look right. Here it is on my client's site (we've hidden some css elements, but otherwise have not hacked the theme): http://kikibenzon.com/courses/digf-6b12-digital-theory-2014/

    ...and here it is on the Bushwick demo site: http://bushwickdemo.wordpress.com/2011/07/07/fall-in-luxembourg/

    Not sure why but the layout doesn't go full width in those contexts on iOS or Android mobile devices. Must be something in the responsive code somewhere, apologies for not having the time to look further.

    Thanks for your response!

    Jeff

  4. Thanks for the links. I focussed on the demo post for now, since the responsiveness isn't designed to work with embedded PDFs so the Luxembourg gallery is a better one to test with. I had a look at it on iPhone (iOS 6 & 7) and iPad (iOS 7), both in Safari. I also used the Resizer bookmarklet to test other screen sizes.

    So far I haven't been able to see any layout issues on this end. The header image fills the width of the screen as expected, and the tiled gallery looks fine. There is a bit of white space on either side of the gallery, but that looks normal to my eye and unlike the "messy" display you refer to. Here are some screenshots from iPhone/iOS 7.0.3:

    https://cloudup.com/cGvO7HPQ5Ui
    https://cloudup.com/cy16i56YoEy
    https://cloudup.com/cREIhz8XT0N

    I wonder if you'd mind uploading a couple of screenshots to help in troubleshooting?

    Here's a guide on how to make a screenshot, if you're not sure: http://en.support.wordpress.com/make-a-screenshot/

    You can upload the screenshot - in a graphic format like JPG, PNG, or PDF - in your Media Library, and provide a link so I can see it, or upload it with a service like Droplr or Imgur.

    For each screenshot, could you please let me know the OS, device, and browser you're running? Thanks a bunch.

  5. Andrea Templari
    Member
    Posted 1 year ago #

    I've a similar problem with my website (only for test) andrea.x10.mx/wp
    That is what i see with my iPhone4 (iOS iOS 7.0.6):
    home screenshot
    post screenshot

    Safari Agent String is:
    Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_6 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B651 Safari/9537.53

    thanks for your help

  6. Hi Andrea - thanks for the screenshots, that's helpful.

    If you visit http://bushwickdemo.wordpress.com does everything look alright to you? I took a look at that demo on an iPhone and both the homepage and single posts are filling the entire screen width, so I'm going to double-check things on our end and I'll keep you posted.

  7. Andrea Templari
    Member
    Posted 1 year ago #

    Hi Kathryn,
    with bushwickdemo.wordpress.com is perfectly displayed. What a strange thing.
    I've translated the theme and created files (.po / .mo) with Codestyling Localization. But i don't think this is the cause of the problem.

    Thanks again for all your help.

  8. asunshine
    Member
    Posted 1 year ago #

    Hi Kathryn,

    I am also running into this mobile glitch.

    Header photo is being cut short in mobile view (iPhone)

    However, I noticed if I input a lot of text in the Site Title the header loads just fine in mobile view. I tried to just inputting a lot of spaces, but it does not take it.

    I hope a solution is found for this as I do love this theme.

    Thank you!

  9. asunshine - yours screenshot looks like something a bit different is happening, but I'm going to bring it to our developers who are working on the other issue so they can have a look.

    Thanks for your patience.

  10. Actually asunshine - scratch that, it looks like this is how the theme resizes for smaller screens. If you check out the demo, you'll see that the header is cropped shorter when you resize your browser to iPhone size:

    http://bushwickdemo.wordpress.com/

    If there's a longer Site Title, it doesn't crop the image as much, so the text doesn't get cut off. As a workaround you could always style the site title to hide on smaller screens using CSS. If you need help with this route, could you please start a new thread here:
    http://wordpress.org/support/theme/bushwick

  11. Chris Knowles
    Member
    Posted 11 months ago #

    I was getting this problem too - demo fine but self-hosted, the images weren't going full-screen.

    Using a Custom CSS plugin, I overrode the local CSS with the WordPress.com CSS and then just kept on deleting until I found the CSS clause that gave me full-width images (scientific, I know).

    And here it is:

    .screen-reader-text {
    	position: absolute;
    	left: -1000em;
    }

    Not displaying the .screen-reader-text classed elements also works:

    .screen-reader-text {
            display: none;
    }

    A post has a second h1 element with the .screen-reader-text class but a page doesn't which perhaps explains why pages look okay on tablets but posts don't.

    Hopefully this helps those having the problem.

    And maybe the theme download can be updated?

  12. Kathryn
    Automattic Happiness Engineer
    Posted 11 months ago #

    Thanks for this, Chris. I've added a note to the bug ticket we have in progress for this issue. We'll keep you posted here.

  13. nicollb
    Member
    Posted 9 months ago #

    I too have (had) the iPhone display issue... used the display:none; fix and it works fine. But, I'm not sure this is the best way to fix this.

  14. Hi nicollb - could you please confirm what version of Bushwick you're using, and provide a link to the site running Bushwick? Thanks.

  15. wyzerus
    Member
    Posted 8 months ago #

    Thanks Chris Knowles!

    I was about to spend probably ages hunting this rogue class down and you saved me from myself.
    Thanks

  16. designsimply
    Member
    Posted 8 months ago #

    I noticed the Bushwick theme was last updated on 2014-06-30 to version 1.2.1.

    Can anyone confirm they are still seeing the iPhone display issue using version 1.2.1 of the Bushwick theme?

  17. automattic
    Member
    Theme Author

    Posted 7 months ago #

    Howdy! Just a note to say the screen overflow issue on mobile devices is fixed in the newest version of Bushwick, which can be downloaded here:

    http://public-api.wordpress.com/rest/v1/themes/download/bushwick.zip

  18. jonaslamb
    Member
    Posted 3 months ago #

    I'm having an issue with how posts display on IOS8 (iphone 5) which sounds related to this thread and possible indication that issue is not resolved.

    It's happening on all but the most recent post which seems really odd. Have checked all the html of that post for errant tags, http://jonaslamb.wordpress.com/2014/11/25/keep-it-simple/ . When minimized in a chrome browser window or using the mobile preview option in 'preview post' the full content of post displays however on iphone, only the first portion of the post (~5 lines below the header) loads/displays, screenshot here https://jonaslamb.files.wordpress.com/2014/12/ios_issue.png

  19. jonaslamb
    Member
    Posted 3 months ago #

    I've upgraded themes rather than wait for this bug fix. Will try to return to bushwick another time.

  20. Hi jonaslamb - thanks for the report and screenshot on this Bushwick issue.

    Just to clarify the problem you were having since you've since switched themes, are you saying that on certain posts you were unable to scroll down to view the complete content of the post on iPhone 5?

    Looks like your site is running on WordPress.com, and the theme works a bit differently there than on self-hosted sites. (These forums are for folks running WordPress on their own servers.) I haven't seen any related Bushwick reports on WordPress.com, but I would still be glad to look into the issue if you ever decide to switch back to Bushwick, so feel free to post in the WordPress.com themes forums if you need further help:

    http://en.forums.wordpress.com/forum/themes

    Tips on getting help in the WordPress.com forums: http://en.support.wordpress.com/getting-help-in-the-forums/

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.