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
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
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
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/
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 2 years, 11 months ago by
bruceleebee.