WordPress.org

Ready to get started?Download WordPress

Forums

Bushwick
mobile layout glitchy (17 posts)

  1. remotedevice
    Member
    Posted 6 months 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 5 months 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 5 months 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 5 months 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 5 months 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 4 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. 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 1 month 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 1 month 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 3 weeks 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
    joseph
    Theme Author

    Posted 1 week 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

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.