If you are looking to change certain elements from the gallery on your mobile/tablet and they are not available in the plugin, you can do it with custom CSS. You need to add the following codes in your WordPress dashboard > Appearance > Customize > Additional CSS.
Table of Contents
Hide the thumbnails on mobile
@media screen and (max-width: 800px) { .modula-fancybox-thumbs.modula-fancybox-thumbs-y { display: none !important; } html body .modula-fancybox-show-thumbs .modula-fancybox-inner { right: 0 !important; } }Hide the thumbnails button on mobile
@media screen and (max-width: 900px) { .modula-fancybox-button.modula-fancybox-button--thumbs {
display: none !important;
} }
Remove the zoom button on mobile devices
@media screen and (max-width: 1000px) { .zoomContainer { display: none; } }
Add border radius to your gallery on mobile devices
In order to add a border radius to your gallery you need to go to your WP dashboard > Modula > Edit your gallery > scroll down to 'Style' > set the border radius > Update gallery. More info here
However, if it is not displayed on your mobile on Firefox/ Safari etc. please add this code in your WP dashboard > Appearance > Customize > Additional CSS:
html body .modula .modula-items .modula-item{-webkit-mask-image: -webkit-radial-gradient(white, black);}