Block or stop elements (ads) from loading using CSS

WordPress Nginx
#1

Is this possible? I know of display:none, but does that actually stop the element (ie an ad) from loading? Doesn’t it still load in the background, just not visible?

My problem is that redis cache only has one type of cache for all pages, so I need to use CSS to stop ads loading (ie mobile vs desktop). At the moment I use php code, but that does not work with redis cache (well it works, but the cache contains both mobile and desktop versions).

#2

display:none just hides an element, does not prevent it from loading.

If you need to control how ads load depending on the device resolution, you must use JavaScript (client side) for this matter.

I can help with the concept only, no code sample at this time, unfortunately.

1 Like
#3

Hello,

like @portofacil said, you have to use javascript conditional to display or not something to your visitor without having issue with caching. You can use the screen width detection :

<script>
if (screen.width >= 480 ) {
    // do something here
}
</script>
1 Like
#4

Thanks both, I found a plugin that can do it https://wordpress.org/plugins/ad-inserter/ (client side insert), but my ad code is apparently not compatible with being included in this way.

#5

AdvancedAds is the most popular wordpress plugin to manage ads and to display/hide ads depending on the visitor device.

#6

Thanks, I see from their website:

This option uses the wp_is_mobile() function included in WordPress (Codex). If you are unsatisfied with its functionality, have a look at the function in the WordPress core.

I am already using that function manually to show/hide ads per device, so that would not help me. But I see they also say:

This setting does not work properly on cached websites if you don’t use the cache-busting feature in Advanced Ads Pro.

So I will check that out. Are you affiliated with the plugin?

#7