-
Posts
-
Hi,
I’m encountering an issue with the lightbox. When I click on a picture, the lightbox doesn’t fit the window.
I have a vertical scrollbar, the lightbow fits with the entire vertical window.I putted an exemple in the private content.
Thank you for your help !
RegardsHey Obeatone,
Sorry for the late reply. Please try the following in Quick CSS under Enfold->General Styling:
.mfp-content { vertical-align: top !important; }Best regards,
RikardHi thank you for you answer but it doesn’t fix totaly the problem.
When adding this code, my picture is on the top but I still have a vertical scrollbar and I have to scroll to see the entire picture… See picture in private content. For me the lightbox doesn’t fully work.Can you tell me how to fix it ?
Thank you for helping !
RegardsHi Obeatone,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
- Install and activate ” Temporary Login Without Password “.
- Go to ” Users > Temporary Logins ” on the left-side menu.
- Click ” Create New “.
- Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
( do be sure that we have enough time to debug ). - Click ” Submit “.
- You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.
When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create an admin user and post the login credentials in the “private data” field.Best regards,
NikkoHi, thank you for your answer.
I created you an admin account. You will find the login and password in private section.Thank you for helping !
RegardsHi Obeatone,
Thanks, I tried to apply settings you have on my local site and even used the same image and I couldn’t reproduce the issue.
I think some js script might not be calculating correctly though there’s no js errors.
We’ll try to check on this issue further however we don’t want to affect your live site, can you try to create a staging site? basically it’s just a duplicate your site placed in your subdomain, here’s a link on how to create a stage site: https://themeisle.com/blog/wordpress-staging-site/
If you have done this, please give us admin and ftp access of the stage site.Best regards,
NikkoHi, Thank you for your answer.
It is too complicated for me to create a staging website ;)
I made a backup of my website, FTP and Database. I think it will be ok if you are meticulous and cautious ;)You will find all the access in private content.
Thank you for helping !
RegardsHi,
Thanks for the update.
This css code should help constrain the height of container when lightbox is activated or visible.
.mfp-zoom-out-cur, .mfp-zoom-out-cur #wrap_all { height: calc(100vh - 90px) !important; overflow: hidden; } .mfp-bg, .mfp-wrap { max-height: 100vh !important; overflow: hidden; }Best regards,
IsmaelHi Ismael,
Thank you for helping !However I think this is a little bit of tinkering…
When I’m on the top of my page, after clicking the picture, I no longer have the vertical scrollbar but I can’t see the whole picture.
And when I’m in the middle of the page and I click on the picture, I have a scrollbar, a white background and a vertical scrollbar… (see picture in private).Can you solve the issue (js ?) and not tinker it with css ? :)
Thank you for helping !
RegardsHi,
Thank for the update.
Replace the css code with the following if you only want to align the lightbox arrows and keep the scrollbar.
.mfp-bg, .mfp-wrap { max-height: 100vh !important; overflow: hidden; }Best regards,
IsmaelHi Ismael,
I think we did not understand each other :)I just want to have a working lightbox. I took off the CSS lines you gave me.
You can check the issue in the link I put in private content, you just have to click on the picture.It seems to be a JS problem. Can you take a closely look and solve it ? (I already give you Backoffice access and FTP access).
I think CSS is not a real solution.Thank you for helping !
RegardsHi,
Are you referring to the lightbox height? Aside from that, I don’t see any issue with it and the css code above is supposed to fix that issue.
Best regards,
IsmaelHi Ismael,
I re-added your CSS and you can see that is not properly working. The picture is too big and when I scroll I have white background.I want exactly the same result as this page : https://kriesi.at/themes/enfold-2017/product/a-product/
Thank you for helping ! :)
RegardsHi,
Did you adjust the size of the lightbox thumbnails? It’s not supposed to display that big. Anyway, we adjusted the css code so that the whole image is visible above the fold. Don’t forget to purge or remove the cache before checking the page.
.mfp-wrap .mfp-content { vertical-align: top !important; } .mfp-wrap { max-height: 100vh; top: 10vh !important; } .mfp-wrap .mfp-container { max-height: 80vh; } .mfp-wrap img.mfp-img { height: 100%; }Best regards,
Ismael
- You must be logged in to reply to this topic.