Bug report: long images and responsive view

bruceleebee
(@bennygill)

4 years, 8 months ago

Great plugin guys, but I’ve found a few bugs that are stopping me from being able to use it.

1) The lightbox “theme 5” does not handle wide images very well. It positions them too far to the left of the screen, which hides the left scroll arrow. This is how it tooks with a normal picture: http://nimb.ws/ErhLMq and this is how it looks with a wide picture: http://nimb.ws/Xgmfq8

2) Also the responsive mobile view of lightbox “theme 5” does not work very well. The image is placed too high, not in the centre of the screen. And the image is covering the arrow and close buttons so the user cannot see the navigation interface. Also the caption text is missing, there is a big black spot down the bottom where it should be displayed. See here: http://nimb.ws/Ix0Jvb

Viewing 5 replies - 1 through 5 (of 5 total)

Huge-IT Support
(@huge-it-support-1)

4 years, 8 months ago

Dear bennygill,

Thanks for contacting us.
There are several changes which should be applied in the codes.
1) Please open the file named portfolio-gallery\assets\style\responsive_lightbox.css
a) change left:0; to left:5%;
b) add width:95%;
It should look like in the screenshot https://prnt.sc/iasl4w

2) open the same file
a) changw top:60%; to top:68%;
b) copy and paste the codes in the media: https://pastebin.com/raw/mwYxzMh2
Here is how that should be displayed after the changes: https://prnt.sc/iatwnl

We will wait for your results

Thanks

Thread Starter bruceleebee
(@bennygill)

4 years, 7 months ago

Hi,

Thanks so much for the help.

1) DESKTOP: There is still a problem on the desktop when viewing long images in Light box theme 5. The image is pushed to the left side of the screen, which obscures the left arrow. Its bad UX because the image should be shifted further to the right so that it can be seen. Most users won’t know the left arrow is there otherwise. See here: http://nimb.ws/5PX690

2) MOBILE: Same problems as before, but now also the close button is in the wrong spot. The close button needs to go back to the same spot, but have the image shrunk slightly so that the arrows and close buttons can be seen. Also the image caption text is not shown, it should be displayed at the bottom in the big black gap. See here: http://nimb.ws/DAvOds

Huge-IT Support
(@huge-it-support-1)

4 years, 7 months ago

Dear bennygill,

Will it be possible to provide a link to the page where the portfolio is added and we will check the codes through inspect element right on your website?

Thanks

Thread Starter bruceleebee
(@bennygill)

4 years, 7 months ago

I think I figured part of the problem, I was looking at the mobile view using chrome dev tools, not an actual phone. On a real phone (not a simulated one) the captions are showing and the buttons are positioned correctly.

But there are still a few issues…

1) MOBILE: If there is long caption text it gets cut off on mobile view. Can we make that text scroll-able so they can read it all? A slide up with the thumb or similar would be good UX.

2) DESKTOP: Wide images are pushed too far to the left of the lightbox, therefore covering the left arrow.

Here is a live test page I have made for you: https://www.elementpaints.com/test-page/
Thread Starter bruceleebee
(@bennygill)

4 years, 7 months ago
Also there is problem with links that are added to the caption box. It works, but it adds some extra unwanted text to the to of the caption. See the first image on my test gallery for an example of this.

P.S. I reverted the code changes back to the original version as they were not needed after I discovered some of the mobile problems came from chrome dev tools.
- This reply was modified 4 years, 7 months ago by bruceleebee.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Bug report: long images and responsive view’ is closed to new replies.

Views