Hey guys...just curious if it's possible to refine the size of photos / videos when they pop up in the Lightbox. I like that it goes mostly full screen but I often would love the assets to have a little more elbow room and not be so crammed in...maybe fill like 80% of the screen? Would there be a way to easily adjust this globally?
After playing with it again, I realized that because my browser had timed out none of the new CSS provided was taking. This works great. Adding 98px of padding was a bit too much for mobile so instead I changed it to
So I'm realizing well after the fact that this actually may not be working as well as I thought. While this code initially resizes the video or image in the lightbox when I hit the next / prev buttons the next / prev images are smaller and I loose the ability to swipe to the next / prev asset as well.
Any other ideas on how I can simply decrease the size of the image / video in the lightbox without loosing any functionality?
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Hey guys...just curious if it's possible to refine the size of photos / videos when they pop up in the Lightbox. I like that it goes mostly full screen but I often would love the assets to have a little more elbow room and not be so crammed in...maybe fill like 80% of the screen? Would there be a way to easily adjust this globally?
Thanks in advance!
Hi Eric,
Thank you for getting back to us.
Try adding the CSS below and let us know how it goes.
.fancybox-slide { padding: 98px!important; }We look forward to your reply.
Thanks,
Thanks for the quick reply Andrew...
Unfortunately that didn't seem to make any difference on either the video pop up or a pop up from a photo gallery. Any other suggestions?
Hi Eric,
Thanks for writing back.
This is how I see the lightbox images : https://monosnap.com/file/Ukv8KXrhifaEor9veQTbNi6CCyn562
Let me know whether I am missing something.
After playing with it again, I realized that because my browser had timed out none of the new CSS provided was taking. This works great. Adding 98px of padding was a bit too much for mobile so instead I changed it to
.fancybox-slide { padding: 7%!important; }and it seems to work just fine. Thanks so much!
Hi Eric,
We're glad this is working now for you.
I'm happy that we could assist you! If you haven't already, please consider sharing your experience by leaving a review on ThemeForest.
Your feedback is valuable to us and greatly appreciated!
Should you have any further questions or encounter any issues, please don't hesitate to reach out.
Best regards,
Hey guys...
So I'm realizing well after the fact that this actually may not be working as well as I thought. While this code initially resizes the video or image in the lightbox when I hit the next / prev buttons the next / prev images are smaller and I loose the ability to swipe to the next / prev asset as well.
Any other ideas on how I can simply decrease the size of the image / video in the lightbox without loosing any functionality?
Thanks in advance.
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.fancybox-can-zoomIn .fancybox-image { max-height: 80vh; top: 50% !important; transform: translateX(-50%) translateY(-50%) !important; width: auto !important; left: 50%; }Thanks
ThemeNectar Support Team
this worked perfectly. Thanks again for the great support.