Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #23265

    Would like to say thanks for the theme and the helpful support threads. I have one problem that I can’t seem to find an answer about.

    My replete theme is set to responsive. However, on a mobile device when a product image or thumbnail in a product page is clicked on, when it zooms in the image is tiny. And the rounded corners of the pp_top, pp_left, pp_right are all missing. The image is probably less than 100px wide. When I view the live demo of the theme the images go to full width on mobile when clicked on. I have tried different image resizing and regenerating. And hard crop vs not hard crop. But nothing seems to make a difference. Everything works fine on the desktop view but not on mobile. Any idea what is going wrong? Thanks.

    #119133

    Hi deejan007,

    If you can provide a link to the site we can take a look at what might be happening.

    Regards,

    Devin

    #119134

    Sure here’s the link. http://shopdepaulo2.draganfiredev.info

    #119135

    Hi,

    Open js > prettyPhoto > css > prettyPhoto.css, at the very bottom find this code and remove it.

    /* prettyPhoto styling for small screens */
    @media only screen and (max-width: 767px) {
    .pp_pic_holder.pp_default { width: 100%!important; left: 0!important; overflow: hidden; }
    div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }
    div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }
    .pp_content { width: 100%!important; height: auto!important; }
    .pp_fade { width: 100%!important; height: 100%!important; }
    a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }
    #pp_full_res img { width: 100%!important; height: auto!important; }
    .pp_details { width: 94%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 10px; background-color: #f8f8f8; margin-top: -2px!important; }
    a.pp_close { right: 10px!important; top: 10px!important; }
    div.pp_default div .pp_content {min-height: 50px;}
    }

    Edit custom.css then add this code.

    /* prettyPhoto styling for small screens */
    @media only screen and (max-width: 767px) {
    .pp_pic_holder.pp_default { width: 100%!important; left: 0!important; overflow: hidden; }
    div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }
    div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }
    .pp_content { width: 100%!important; height: auto!important; }
    .pp_fade { width: 100%!important; height: 100%!important; }
    a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }
    #pp_full_res img { width: 100%!important; height: auto!important; }
    .pp_details { width: 94%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 10px; background-color: #f8f8f8; margin-top: -2px!important; }
    a.pp_close { right: 10px!important; top: 10px!important; }
    div.pp_default div .pp_content {min-height: 50px;}
    }

    Regards,

    Ismael

    #119136

    Thanks for the help Ismael. But that code doesn’t change anything. I tried it and same result. I also don’t see that you even changed anything in it aside from background color of .pp_details, which really isn’t the problem. You sure that’s the right code to replace it with? Doesn’t seem to do anything.

    #119137

    Hi,

    Yes, I didn’t do anything with code. I tested this on my end. If you remove the style on prettyPhoto.css and place it on custom.css, the lightbox image is much larger, in fact, it occupies the whole screen horizontally. This is what I have on my end.

    I’m testing it using browsers so it may be a different case when you are on actual mobile device. Let me tag the rest of the support team. Please remove browser cache then hard refresh the page.

    Regards,

    Ismael

    #119138

    Hi,

    There is also a second variation to Ismael’s code that you can try out

    @media screen and (max-device-width:1024px) {
    .pp_pic_holder.pp_default {
    width:100%!important;
    left:0!important;
    overflow:scroll;
    -webkit-overflow-scrolling:touch;
    }
    div.pp_default .pp_content_container .pp_left {
    padding-left:0!important;
    }
    div.pp_default .pp_content_container .pp_right {
    padding-right:0!important;
    }
    .pp_content {
    width:100%!important;
    height:auto!important;
    }
    .pp_fade {
    width:100%!important;
    height:100%!important;
    }
    a.pp_expand,a.pp_contract,.pp_hoverContainer,.pp_gallery,.pp_top,.pp_bottom {
    display:none!important;
    }
    #pp_full_res img {
    width:100%!important;
    height:auto!important;
    }
    #pp_full_res {
    line-height:0.7 !important;
    }
    .pp_details {
    width:94%!important;
    padding:15px 3% 15px 3%;
    min-height:35px;
    background-color:#fff;
    margin:0!important;
    }
    div.pp_default .pp_description {
    margin:11px 50px 5px 153px !important;
    }
    div.ppt {
    display:none !important;
    }
    .pp_play {
    margin-right:20px !important;
    }
    .pp_arrow_previous {
    margin-right: 5px !important;
    }
    }

    Thanks,

    Nick

    #119139

    Ok thanks for the help guys. Maybe it is something unique to my install if no one else has this problem. Neither of those two pieces of code change anything. I still get the same result of a tiny image and mangled box missing rounded corners. I also get mixed results if I turn the mobile device horizontally as opposed to vertically. In a desktop browser with shrunken width it displays better but still not properly and does not look like your screenshot.

    It actually looks much better if I just remove this mobile code completely. It is still small but the rounded corners are there and the close button is in the proper place. However only in vertical does it look nice. Horizontally it gets messed up again and the image is thinner in width than the close button which mangles the layout. I have tried in multiple mobile browsers. I may just look into disabling this in mobile because it seems unfixable. That or I will try to set min widths to alot of the css rules or something to get it to work. Seems to me it is not detecting the “100%;” screen width properly.

    #119140

    Hi deejan007,

    Since you are using WP-Super Cache you may be running into points where the changes you make the the files aren’t actually reflected right away since its still showing an older cached version of those files.

    You should try clearing your sites cache after making one of the css changes/additions.

    Regards,

    Devin

    #119141

    Hey guys. Good news and bad news. Bad news is I somewhat wasted your time. Thanks for the help though. Good news is I got it working. I ended up disabling plugins to see if there was some kind of conflict of some sort and I have an “onclick show popup” plugin installed. Once I deactivated that it started working.

    Nick’s code displays the best for me out of the two. I made a couple changes to get it displaying perfect for me. I added in

    .pp_arrow_next {

    margin-left: 43px !important;

    }

    .pp_nav {

    width:50%!important;

    }

    .pp_close {

    margin-top: 28% !important;

    margin-right: 10px !important;

    }

    Looks perfect now. I will test on some other mobile devices and see if my own rules screwed anything up. Thanks again for the help. Think I am good from here on out.

    #119142

    Thanks for the help Devin. It wasn’t that. I had all cache plugins disabled from the get go. And been clearing browser cache every test just in case. I got it sorted now. Feel dumb cause it was a stupid plugin conflicting that I never thought about.

    #119143

    Hi!

    Glad you found the solution :)

    Regards,

    Peter

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

The topic ‘Mobile Product Image Zoom’ is closed to new replies.