Product Image Preview/Overlay Controls issue in Responsive layout

Home Forums Jevelin Theme Product Image Preview/Overlay Controls issue in Responsive layout

Home Forums Jevelin Theme Product Image Preview/Overlay Controls issue in Responsive layout

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • ftahumour
    Participant

    Hello,

    I have noticed that when browsing product images via the overlay preview feature on Mobile, the Left/Backward + Right/Forward + Close/X controls are very small, and quite often a tap next to the controls results in the overlay preview being closed down.

    In fact, I noticed that if the user taps “anywhere on screen” other than exactly over the  Left/Backward + Right/Forward controls, the overlay closes as if the Close/X control is being pressed. This behaviour is the same on both Desktop and Mobile, but it is particularly irritating on Mobile because it makes it very difficult to scroll through images in that overlay view without being thrown back to the image page. If a product with 10+ variations (colours) exists, its almost impossible to scroll through all 10-20 images without repeatedly closing and having to re-open the image preview overlay. This type of user experience is 100% bad for business!

    Can I please ask for the following considerations to be made regarding improvement in the theme code as soon as possible:

     

    1. Slightly increase the dimensions/size of the overlay controls (pictured in capture.png) in responsive mode at least!
    2. Either remove the ability to close the preview overlay if the user clicks outside of the specified controls, OR, increase the dead-zone around the controls (pictured in capture0.png), so near clicks/taps to the controls do not = Close preview action.

    I hope this makes sense, if not, just browse a listing with many pictures via mobile and click to preview the images, then try to scroll right until the end whilst paying attention to the image, not the controls!

    I look forward to your feedback.

    Regards,

    George

    Attachments:
    You must be logged in to view attached files.

    Hi George,

     

    I hope you are well today and thank you for your question.

     

    You can make it larger for mobile devices by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    @media screen and (max-width: 641px){
    body a[class*='lightcase-icon-']{
        font-size: 55px;
    }
    }
    
    

     

    Best regards,
    Shufflehound team

    ftahumour
    Participant

    Hello, many thanks, that’s a great band-aid.

    May I ask, why do you provide the “X” action button in that view, when the user can click on any part of the shaded area to exit the preview view?

    From usability perspective, if the user slightly miss taps or their screen calibration is slightly off and they don’t hit the forward/backward buttons exactly, they are kicked out of the view and then are forced to start again from the beginning. That user experience can get tiresome very quick!

    Regards

    George

    May I ask, why do you provide the “X” action button in that view, when the user can click on any part of the shaded area to exit the preview view?

    Some users don’t know how to exit the preview view therefore the close button is displayed.

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