fotomoto is not resizing correctly in mobile browser

Hello I'm using fotomoto and currently having problems getting the script to resize on a mobile browser. You currently have to scroll offscreen and it still doesnt work correctly.

http://tubemapper.com/london-piers-an...

i'm using your wordpress plugin and the Fancybox script

Regards

luke
1 person has
this problem
+1
Reply
  • Hi Luke,

    Thank you for the post. Could you email us and let us know what version of which mobile browser you're using on what device? Also, I assume it's the shopping cart Widget that you're seeing resize issues with, so if you could give me a bit more of a description about what you're seeing or not seeing that would be very helpful!

    Thanks again and kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hello sorry

    So yes I'm talking about the fotomoto shop that loads once you click on the 'buy print' button. The toolbar appears correctly, but when you click on buy print, the shop loads off screen to the top of the page and I have to scroll up to see it. Also the shop is too wide to view on my mobile. It is not responsive.

    If you try the link I used in the first message you'll see what I mean.

    I'm using a galaxy note and the latest opera and google chrome browsers. This works fine on my desktop browsers

    regards

    Luke
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Luke,

    Our shopping cart Widget is an older fixed-width design so the expected behavior on a device where the width of the viewport is smaller than the width of the shopping cart, parts of the cart may not be visible at first, but the user should easily be able to easily swipe left and right to see all areas of the cart. If that's not what you're seeing, or you can't access all parts of the Widget please do let me know and I'll be happy to investigate.

    We do plan to make the Widget responsive in the future, but it is a major undertaking and obviously a core piece of our offering, so it will take some time.

    Thanks again and kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Okay so that half of the problem cant be fixed... for now!

    But I still have the other issue which is more serious. The fotomoto shop is popping up above the mobile browser viewport. So users will assume nothing has loaded. They wont know that It is fixed to the top of the web page so they have to scroll up.

    Perhaps an additional css command is needed for the mobile browser pop up positioning. Perhaps fixing it to the top may work?

    Luke
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Luke,

    Thanks for the reply, and I do apologize, but I'm not quite following you here...could you give me the exact steps of what you're doing to see the issue? For example:

    1. Go to X URL
    2. Click Y
    3. See Z that's not what I expect

    A screenshot would also be helpful to help me visualize. I am more than happy to help with any available solutions, but I need to have a clear picture of the issue at hand.

    Thanks again and kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Ok Sorry Derek

    1. Go to on your mobile
    http://tubemapper.com/london-piers-an...

    2. Scroll down. There is a header picture followed by intro text and then 3 more images

    3. Click on one of these images

    4. The fotomoto toolbar appears at the top. Click 'buy print'

    5. The fotomoto logo shows it's loading then diasappears. Then nothing happens. You have to scroll up to see that the shop has loaded

    DOes this make sense now?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • I’m confused
    This topic has been marked as resolved for some reason?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Luke,

    I just took a look at your site again and do see the Buy Buttons appearing as expected, but when they are clicked, the Fotomoto shopping cart Widget is not appearing in front as it should. I will need to do more investigation to find out which elements are putting themselves in the front...this could be fancyBox (unlikely as it should be working fine), or it could be something in the theme/template or plugins you're using (more likely), but I'll try to get to the bottom of it and if needed ,see if we can add some custom CSS to move the Widget to to the front where it should be.

    For now, as you mentioned, Fotomoto is working nicely on larger screens, and I have marked the ticket "in progress", so feel free to continue the conversation on here.

    In looking at your code through developer tools, I am seeing an error that you might want to know about, which looks like it's related to addthis.com:

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://m.addthis.com/live/red_lojson/.... (Reason: CORS header 'Access-Control-Allow-Origin' does not match '*').

    What I would suggest is that you first disable this and any other non-essential plugins for now so we can see if that resolves the issue. Let me know once you've done that so I can take another look.

    Thanks again and kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • I disabled the addthis plugin. and it made no difference. On re-enabling addthis, the console shows that this error is now resolved.

    Thanks for pointing out the addthis error, I didnt notice that the social sharing links had disappeared.

    Luke
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Luke,

    We do our best to help everyone that wants to use our service, regardless of what they're using to build their website, and please understand that in many cases there are several different factors that vary in how they could affect how Fotomoto works, like theme code, other plugins, etc.

    In this case I can see the issue, but it is not happening when viewing a fancyBox test site on a mobile device (iPhone 6S...see screenshot below), which leads me to believe there is some CSS being applied by code on your site that's changing what's likely to be a z-index value to something that makes it cover up our shopping cart Widget.

    It's going take some digging through your code find this, so please understand that we don't officially provide coding support for all themes and plugins, but I will be happy to see what I can do to resolve the issue and post here as soon as I have some information.

    I hope that helps and will get back to you as soon as I can.

    Kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Luke,

    I'm still searching for the code that is conflicting with our shopping cart on your page, but after spending some time looking at your site, I'm wondering if you might prefer an alternate solution that circumvents the trouble in the first place...

    Not being a local to London and having never been there, I would want to see more information about the image than just the caption, for example some backstory about the Blackfriars Pier. Do you think it might be nicer when you click on the image say at http://tubemapper.com/london-piers-an... that you instead go to a "detail" page about the image rather than just showing the lightbox? If you went that route you could a) show the Fotomoto Buy links directly under the large view of that image on the info page and b) show more info about the image. You can do this by setting the link on the thumbnail to go to an "attachment" page as explained in Inserting Images into Posts and Pages.

    If you like that option please do let me know, otherwise I will continue my venture in to the CSS on your site.

    Thanks and kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hey Derek

    That's not a bad idea. People generally don't click through to many pages when they visit a site, so I'd like the links all on one page. But amazing thinking out of the box there.

    I was looking at the other gallery scripts that fotomoto supports on wordpress and though that it might be also a good idea to see if I can get any of these scripts to work with my current set up. if i can load a different gallery light box perhaps this will fix the issue?

    Luke
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Luke,

    Glad you liked the idea. I completely agree that people tend to not click through much when they visit a site, so it's most-ideal to put the Buy links in front of them as soon as reasonably possible. With that in mind, you could take it one step further and put the Buy links right on the gallery images with no lightbox at all...the only thing to be aware of is that you'll want the images to be un-cropped, as you wouldn't want Fotomoto to pick up the cropped images and make them for sale.

    In the above scenario you wouldn't need a lightbox at all, but if you want to choose a different one that would probably also resolve the situation we're having with fancyBox, but I can't say with certainty as your site is running theme and other code that may also conflict with Fotomoto (though it's not likely).

    I hope that helps and please let me know how you'd like to move forward and I'm happy to assist regardless.

    Kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hello Derek I've be looking and thinking about this. On my mobile site you have to first scroll down to click on an photo. if you scroll back to the top once that photo's lightbox is open, then you click the buy button, the fotomoto shop will load correctly

    So in summary, I think that the mobile site is positioned absolute top. Perhaps we can write a CSS command to fix the shop to the top for mobile viewers. So could you try out adding CSS like this for me?

    NOTE: the fotomoto class might be wrong here, and also not sure this the ideal width for all mobiles, just made it up.

    /* fix position for mobile viewers */
    @media only screen and (max-width: 700px) {
    #fotomoto_view_cart_float {
    position: absolute !important;
    }
    }
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Luke,

    In my suggestion above you could have the Buy links appear directly under the images on mobile without first clicking on the photo - would you prefer that? (it's more direct).

    FYI, when fancyBox is used as the Script Library, we use CSS to absolutely position the Buy links to the top of the page, since we can't detect the actual position of the image on the screen, but if we went the route above we can put the Buy links directly under the image as Fotomoto usually does.

    Let me know on that before we start messing more with the CSS and we'll get it straightened out.

    Thanks,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hello Derek,

    So two points to make here

    1. So I added this css to my fotomoto shopping cart css settings. This actually seems to work, though it will need some cleaning up. This fixes the cart to the top if the browser size is less than 700px. I imagine it would be also be beneficial to perhaps move it down by 10px or so, to help it fit the mobile browser better.

    /* fix position for mobile viewers */
    @media only screen and (max-width: 700px) {
    #fotomotoWidgetContainer #fotomotoWidget {
    position: fixed;
    }
    }

    2.Thank you, your suggestion is a good one. Having buy links the under the image is probably the best idea. If we can get it to work this way it is probably best. We'd want a simple (buy) under each image.

    The downside, to this is to get it to work this way you'd have to disable the script from working on category pages and the home page as these have different templates to the main pages

    Fotomoto script automatically appears under all images. If you visit the homepage tubemapper.com, you'll notice that pictures are menu items to select, there should not be a buy link here, could you disable it here, and on the category pages, whilst still letting it work on normal pages?

    Regards

    Luke
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • My fix doesn't really work, I've just noticed as you cant scroll right to review the image in the fotomoto shopping cart.

    But my css may be a good way of targeting the mobile version of the site? Just have to adjust different parameters.
    • view 1 more comment
    • I think you are correct Derek, and we should have the buy link not in a light box but under the image itself. The images are the correct ratio on this page and not square thumbnails, so this solution will work. Whats the best way to do this?

      Luke
    • Hi Luke,

      I agree completely, and as long as the aspect ratio of the thumbnails match the aspect ratio of the images, then you can feel free to set your Script Library on the Settings page of your Fotomoto Dashboard to "None, I'm not using any script or template" and just make sure that the "Minimum size..." setting is set to something smaller than the width (and height) of your smallest thumbnail. After that you should see Buy links under the thumbnails and be all set! If you need to reduce the width of the row of Buy links so that they don't wrap, there are a few options.

      Just let me know if I can do anything else to assist with the setup, otherwise happy selling!

      Kind regards,
      Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Happy new year,

    Sorry Derek, I've change my mind and I actually prefer the buy link you click on a image.

    I did a small field test and people responded better with the by link popping up. SO this is the way I want to.

    I've made the text bigger, and I think it looks cool this way. Also the site looks cleaner as it isn't littered with "buy print" text.

    So this means this means that I still have a problem with the fotomotot shop loading outside the mobile viewing window.

    Can you give a CSS fix for this?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Luke,

    My apologies for not seeing your reply here sooner. I tested your site just now on an iPhone 6 and the Fotomoto shopping cart Widget seems to be working nicely as shown in the screenshot below.

    If there's anything else I can do to assist here just let me know!

    Kind regards,
    Derek

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • This is still not working on my android. The iphone has high resolution so shows all the page. On my phone the store pops up at the top of the page which is outside of the mobile phone viewport. You can recreate this yourself by making the browser window small, when you click on buy print the store will show outside the viewport. You'll have to help me make a code that corrects this when using smaller browser windows.

    This almost works but doesn't allow you to scroll horizontally

    /* fix position for mobile viewers */
    @media only screen and (max-width: 700px) {
    #fotomotoWidgetContainer #fotomotoWidget {
    position: fixed;
    }
    }
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Luke,

    Thanks again for the details. I tested your site on a Galaxy S7 as well as a Note 4 and can see the issue you're describing. On the same phones I also tested a "plain" site, as in one with no Javascript and only basic CSS running on it, and it worked as expected.

    So, I suspect it's an issue with some conflicting library CSS or JS code. I'm going to continue testing starting with another site that uses only fancyBox and see how that goes. I'll keep the post updated here with my findings and we'll get to the bottom of this.

    Thanks again for your patience and kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi again Luke,

    I just got done checking a "plain" site that has only fancyBox 2.1.5 and Fotomoto on it and it's working as expected. Your site is using fancyBox for the pop-up as well, so I have a theory that there might be some other JavaScript or CSS in your site code that's affecting how our shopping cart is positioned.

    Could you please make sure you've got any unused libraries & plugins disabled? In looking at the files loading on your site I saw at least one thing that could be affecting things - the wonderplugin popup.

    If you've got any questions just let me know.

    Thanks,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hello Derek

    I've only just recently added that plugin, I can assure you that this is not the issue. I contacted you before I installed this.

    I imagine that its something to do with the theme. The issue occurs when you resize the browser. So I think the resize command is conflicting with the way fotomoto works.

    Luke
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Luke,

    OK, so I have still not been able to determine what the cause of this issue is, but I went ahead and added some custom CSS to the Dashboard which seems to help the situation. Please have a look and see if it works better for your needs now.

    Thanks and kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • It looks like you have made the store load further down, it is slightly better. If this is the best hack I would suggest pushing it down a little further still. We need to see it if someone clicks on the first image, but it can be slightly below the top images. This way you can also see it if you click on the second image. Luke

    What css are you using?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned

  • Hi Luke,

    I added the following declaration to the custom CSS in your Dashboard (see http://my.fotomoto.com/stores/appearance):

    @media only screen and (max-width: 700px) {#simplemodal-container{top:570px !important;}}

    This makes the container 570px from the top of its containing element when the screen is less than 700px wide. It's a bit of a hack but I think it's an improvement and you can feel free to adjust the 570px value to suit.

    Does that work for you?

    Thanks and kind regards,
    Derek
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned