Mobile Custom CSS

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);}