If you are looking to change certain elements from your the gallerys on your mobile/tablet and they are not available in the plugin, you can do it with custom CSS. Here are a few examples of custom changes using CSS.
How to hide the thumbnails on mobile
In order to hide the thumbnails on mobile you need to go to your WordPress dashboard > Appearance > Customize > Additional CSS > add this code:
@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
You need to go to your WordPress dashboard > Appearance > Customize > Additional CSS > add this code:
@media screen and (max-width: 900px) { .modula-fancybox-button.modula-fancybox-button--thumbs {
display: none !important;
} }
Remove the zoom button on mobile devices
Please add this code in your dashboard > Appearance > Customize > Additional CSS (or Custom CSS):
@media screen and (max-width: 1000px) { .zoomContainer { display: none; } }
Add border radius to your gallery on mobile devices
In order to add 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);}
