"Menu template" page template displays poorly on iPhone

Home Forums Automattic Bon Vivant "Menu template" page template displays poorly on iPhone

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #109647 Resolve

    Dilly-Dally Touring
    Member

    I am really enjoying my new Bon Vivant theme. Very nice, but the page I created for the cafe’s menu displays at half screen width on my iPhone.

    To be clear, this is the page that displays my cafe’s menu (food & beverages), not the web site’s menu.

    Also, the price bubbles overlap onto the name of the menu items.

    Here is the URL: http://sunrisecoffeeshop.com/cafe-menu/

    Is there something I can do to fix these issues, or are they bugs? If bugs, what is the process for reporting them and getting them resolved?

    Thanks.

    The blog I need help with is sunrisecoffeeshop.com
    #144849

    Dilly-Dally Touring
    Member

    Folowing up, I have an image of what it looks like on my phone – see image file

    #144876

    Kathryn P.
    Happiness Engineer

    Thanks for reporting this. I’ll bring this to our developers so they can get this fixed up and will keep you posted here.

    #144877

    Kathryn P.
    Happiness Engineer

    Hi again – could you please confirm what iOS your phone is running? You should see it under General > Settings > About. Thanks.

    #144883

    Dilly-Dally Touring
    Member

    Sure – the phone is an iPhone 4S running IOS 6.1.3

    I have taken some more screen shots to illustrate the problem as it appears on the phone, on my iPad, and in Windows – in all cases the browser is Chrome. I took a quick look at Safari on my iPad and it seems to look the same.

    Word docs containing the screen shots are linked to below…

    iPhone – vertical and horizontal

    iPad – vertical and horizontal

    Windows – a series of gradually reducing window widths: the problem comes and goes as the width reduces.

    #144884

    Kathryn P.
    Happiness Engineer

    Hi there, thanks for confirming the iOS version. I was also able to replicate the issue on my end in both iOS 6 and 7, and I’ve reported the bug to our developers.

    For security reasons I can’t open Word documents, but you’re welcome to either upload the screenshots – in a graphic format like JPG, PNG, or PDF – in your Media Library, and provide a link so I can see it (as you did earlier), or upload it with a service like Droplr or Imgur.

    #144885

    Dilly-Dally Touring
    Member

    I have made pdfs from my word docs:

    iPhone

    iPad

    Windows

    #144886

    Kathryn P.
    Happiness Engineer

    Thanks! I’ll keep you posted here once our developers have had a look.

    #145477

    Kathryn P.
    Happiness Engineer

    Hi there, our developer has made a number of improvements and fixes to the mobile display of food menus in Bon Vivant. Would you please have a look and let me know if it looks OK now? Thanks!

    #145526

    Dilly-Dally Touring
    Member

    Hi, Thanks for working on this, it is MUCH better. But there are still a few minor issues which you might like to tweak if you are inclined to do so. Details are below.

    Regards,

    Pat

    1. Centering on iOS is not quite right, although much improved from before. On my iPad it is only very slightly off, almost unnoticeable. But on my iPhone it still clearly not using all the screen. See images of iPhone 4S (iOS 6.1.3) at http://sunrisecoffeeshop.files.wordpress.com/2014/01/phone-vertical-centering.png and http://sunrisecoffeeshop.files.wordpress.com/2014/01/phone-horizontal-centering.png

    2. The cafe menu items (http://sunrisecoffeeshop.com/cafe-menu/) are much better behaved now, they don’t overlap onto the item title any more. But they sometimes show up below (and to the right of) the title instead of alongside.

    See images from my iPhone at http://sunrisecoffeeshop.files.wordpress.com/2014/01/phone-vertical-price.png and http://sunrisecoffeeshop.files.wordpress.com/2014/01/phone-horizontal-price.png

    and from my iPad at http://sunrisecoffeeshop.files.wordpress.com/2014/01/ipad-vertical-price.png and http://sunrisecoffeeshop.files.wordpress.com/2014/01/ipad-horizontal-price.png

    The price bubble dance (if I can call it that ;-) can be seen in a movie I made of my browser in Windows as I changed the window width – http://sunrisecoffeeshop.files.wordpress.com/2014/01/p1020743.mov

    #145527

    Kathryn P.
    Happiness Engineer

    Thanks for the screenshot and screencast, I’m passing them along to our developers so they can have a look.

    #145742

    Michelle

    Hi @dillydallytouring!

    I had a look at your site on my iPhone with iOS 7 and the site appears full-width to me. My colleague confirmed that it looked fine to her as well on a 4S running iOS 6. Could you confirm which browser and version you’re using on your iPhone when you notice these issues? Thanks so much!

    #145745

    Dilly-Dally Touring
    Member

    Aha! I am using Chrome. I just opened the cafe menu page in Safari (iOS 6.1.3 iPhone 4S) and it is indeed full width.

    The item titles and pric ebubble still seem to dance around – for longer titles the bubble is alongside the bubble and both are below the image; but for a shorter title (see “Pavlova”) the bubble is below the title but both are now to the right of the image.

    So I just tried removing the featured image for one of my items (good-old basic joe) and now the title text wraps as if making space for the bubble to its right, yet the bubble is below it. Something is still a little odd with the relative placement.

    Thank you so much for looking into this – I hope I’m not being too picky!

    Pat

    #145747

    Michelle

    Thanks for the info. I’m going to get Chrome fired up on my phone and troubleshoot this further. I’ll let you know when I have more information. I’ll also take a look at the price bubble placement in relation to the site titles.

    #146257

    Caroline Moore

    Howdy! I am not able to reproduce the site width issue in Chrome on an iPhone 5 with iOS 7, however, I have made some improvements to the display of menu items for small screens. You should be able to read the menu much more easily now!

    Cheers,

    Caroline

    #146305

    Dilly-Dally Touring
    Member

    Hi Caroline and Michiecat!

    I like what you have done with the price bubbles – they now stay where they should be. Thank you.

    I’d say this is resolved.

    Cheers,

    Pat

    #146328

    Kathryn P.
    Happiness Engineer

    Excellent, glad to hear it. I’ll close this thread but feel free to start a new one in case you encounter any new issues. Thanks!

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘"Menu template" page template displays poorly on iPhone’ is closed to new replies.