UI
You are able to edit user interface by overriding default Fullscreen Lightbox styles. Easiest way to find
classes you want to edit is to explore lightbox DOM in devtools.
To show an example let's assume you want to edit toolbar:
/* let's change order of buttons (toolbar has display: flex) */
.fslightbox-toolbar-button:nth-child(1) {
order: 2;
}
/* or hide fullscreen button at low resolution */
.fslightbox-toolbar-button:nth-child(1) {
display: none;
}
@media(min-width:576px) {
.fslightbox-toolbar-button:nth-child(1) {
display: flex;
}
}
.fslightbox-toolbar-button:nth-child(1) {
order: 2;
}
/* or hide fullscreen button at low resolution */
.fslightbox-toolbar-button:nth-child(1) {
display: none;
}
@media(min-width:576px) {
.fslightbox-toolbar-button:nth-child(1) {
display: flex;
}
}