[Benjamin DParticipant]

Hi there, I’m having an issue where when you select on one of the product images on a mobile device, it doesn’t show the image of the product. It just shows a dark screen. I’ve tried clearing cache on Cloudflare/WPEngine and enabling Woocommerce lightbox/disabling lightbox and nothing seems to work. Any help would be greatly appreciated.

[Benjamin DParticipant]

This reply has been marked as private.

[Benjamin DParticipant]

It looks like if you scroll way down it does start showing the images? However it doesn’t pop up correctly on the screen.

[RadModerator]

Hi there,

Thanks for writing in.

Woocommerce PrettyPhoto feature is miscalculating the positioning of the image. maybe it’s affected by there floating/hidden elements.

Let’s do our own positioning, please add this CSS to Admin > Appearance > Customizer > Custom > CSS

div.pp_pic_holder {
    position: fixed !important;
    top: 10% !important;
}

Hope this helps.

[Benjamin DParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Please change this

div.pp_pic_holder {
    position: absolute!important;
    top: 10%!important;
}

to this,

div.pp_pic_holder {
    position: absolute!important;
    top: 10%!important;
    width: 80% !important;
    left: 10% !important;
}
.pp_hoverContainer {
    width: 100% !important;
}
#pp_full_res img {
    width: 100% !important;
    height: auto !important;
    max-width: 70% !important;
    min-width: 0 !important;
}

The lightbox takes the original size of the image, in that case, you can upload an smaller image and ignore the CSS above. Else, use the above CSS to force it with 70% width.

Thanks!

[Author]

Posts