January 2, 2014 at 10:54 pm #109647
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.comJanuary 2, 2014 at 11:01 pm #144849
Folowing up, I have an image of what it looks like on my phone – see image fileJanuary 3, 2014 at 4:17 pm #144876
Thanks for reporting this. I’ll bring this to our developers so they can get this fixed up and will keep you posted here.January 3, 2014 at 4:38 pm #144877
Hi again – could you please confirm what iOS your phone is running? You should see it under General > Settings > About. Thanks.January 3, 2014 at 7:46 pm #144883
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.January 3, 2014 at 7:52 pm #144884
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.January 3, 2014 at 8:15 pm #144885January 3, 2014 at 8:19 pm #144886
Thanks! I’ll keep you posted here once our developers have had a look.January 16, 2014 at 5:53 pm #145477
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!January 17, 2014 at 6:54 pm #145526
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.
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.
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.movJanuary 17, 2014 at 6:57 pm #145527
Thanks for the screenshot and screencast, I’m passing them along to our developers so they can have a look.January 22, 2014 at 7:46 pm #145742
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!January 22, 2014 at 8:10 pm #145745
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!
PatJanuary 22, 2014 at 8:18 pm #145747
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.February 3, 2014 at 9:06 pm #146257
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!
CarolineFebruary 4, 2014 at 5:03 pm #146305
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.
PatFebruary 4, 2014 at 7:42 pm #146328
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!
The topic ‘"Menu template" page template displays poorly on iPhone’ is closed to new replies.