A lightbox is an overlay or a popup window that goes over the website content and shows a picture or video. Lightbox view opens on mouse click and showcases a picture or a video while it dims the rest of the viewport.
Lightboxes present a great way to showcase photo galleries, videos or product images. They can be used for images, opt-in forms, video, slideshows, and much more. They are easy to implement, and they give your site a neat professional look and feel.
Lightbox is a JavaScript script that uses a graphical control element known as a modal window to display images and other media and files. It does this using a parent/child mode. A child window opens, which darkens the parent window so it can’t be seen or is just barely visible. The interaction with the parent window stops until the user has interacted with the child window. Responsive lightboxes are mobile friendly, so they adjust to the size of the screen.
When it comes to the responsive view itself, a lightbox might appear different compared to what you expected - this mostly occurs with the lightbox video. For example, you may at times get this result on mobile:
We use a third party script named Pretty photo for lightbox, and there is unfortunately not much space for customizing this script.
On top of that, the lightbox for videos has a player and default customization, which is very difficult to alter.
One way to change the appearance of the lightbox for smaller screens is with a CSS snippet inserted in theme options.
You can try using this CSS code:
@media only screen and (max-width: 480px) {
.pp_pic_holder.pp_default, .ppt, .pp_content, .pp_hoverContainer, iframe {
width: 100%px !important;
}
iframe {
height: 200px !important;
}
#player {
max-width: 100% !important;
}
}
Which should affect the lightbox in this way:
This is another CSS code you could try out:
@media only screen and (max-width: 736px){
body div.pp_default .pp_expand {
display: none !important;
}
div.pp_pic_holder {
width: 100% !important;
left: 0% !important;
}
body div.pp_default .pp_content {
width: 100% !Important;
height: auto !important;
}
.pp_hoverContainer {
width: 100% !important;
height: 100% !important;
}
div.pp_default .pp_details {
width: 100% !Important;
}
.pp_content #pp_full_res>img {
width: 100%!important;
height: auto!important;
}
#pp_full_res iframe {
width: 100%;
min-height: 180px;
padding-bottom: 56.25%!important;
background: 0 0!important;
}
div.ppt {
display: none !important;
}
}
Naturally, you can modify this CSS code and adjust it to your website and to your liking.
When you’re done with the customization, you need to add this CSS code in Appearance > Customize > Additional CSS. All that’s left to do now is clear the cache and review the page.
If the CSS code doesn’t give you the desired result, you could try using some 3rd party plugins for lightbox customization. Here’s one plugin that could be useful.