Disable lightbox @media

Hey Vera,

Thanks for contacting us!

Please add following code to Quick CSS field in Enfold theme options > General Styling tab

@media only screen and (max-width: 480px) { 
a.lightbox {
  pointer-events: none;
}
}

Cheers!
Yigit

Hi,

Thank you for the update.

On which IOs device are you testing this with? You may need to adjust the css media query above to make it work for that specific device. For iPhone 12 or 13 for example, you can use this css media query.

/* 2340x1080 pixels at 476ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) 
{ 
    pointer-events: none;
}

Best regards,
Ismael

Hi,

For iPhone SE 2 device, you can use this css media query.

/* 1334x750 pixels at 326ppi */
@media only screen 
    and (max-width: 320px) 
    and (max-height: 568px) 
    and (-webkit-device-pixel-ratio: 2) 
{ 
    a.lightbox {
       pointer-events: none !important;
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
                    only screen and (min--moz-device-pixel-ratio: 2),
                    only screen and (-o-min-device-pixel-ratio: 2/1),
                    only screen and (min-device-pixel-ratio: 2)
{  
    a.lightbox {
       pointer-events: none !important;
    }
}

Best regards,
Ismael

Hi,

We mistakenly used min-width and min-height instead of max-width and max-height in the css media query. Sorry about that. Please try the css code again, and make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings afterwards. If the issue persists, please provide the login details in the private field so that we can test the modification.

Best regards,
Ismael

Hi,

We just noticed that we didn’t include the selector in the css code above. We logged in and corrected the code in the Quick CSS field. Please try it again now.

The previous css seems to be working as it should in a browser emulation.

Screenshot: https://1drv.ms/u/s!AjjTfXSRbKTvz1ldwkGM2_ufqVJd?e=8nOXh0

If the issue persists, please try to add this code in the functions.php file.

// custom script: disable lightbox mobile
function ava_custom_script_disable_slider_lightbox()
{
    ?>
    <script type="text/javascript">
        (function($) {
            if(false == $.avia_utilities.isMobile) return;
            
            $('.avia-slideshow li a').on('touchstart touchmove touchend', function(e) {
                e.preventDefault();
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'ava_custom_script_disable_slider_lightbox', 9999 );

Best regards,
Ismael

Hi,

What happens if we remove the “touchmove touchend” events from the script above?

On top somehow an old issue is back now in the tab section on mobile devices:

Please open a different thread about the issue so that we can tackle it in isolation. If you want to look for a freelance developer, please check the link below.

// https://kriesi.at/contact/customization

Best regards,
Ismael

Hi,

Try to replace “touchstart touchmove touchend” with “click”, then add this extra css code.

@media only screen and (max-width: 989px) 
{ 
    .lightbox {
       pointer-events: none !important;
    }
}

Please make sure to purge the cache afterwards and check the site on incognito mode.

Best regards,
Ismael

Hi,
Sorry we were not able to help with this one, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike