Remove elements on based on window size

Question

I want to remove a div element on mobile devices only (based on window size).

The element is an advertisement and by using CSS (display:none) is still registered on mobile devices even though the ad does not show (is just hidden), and this is making a fake impression.

My ads are inserted trough Wordpress theme options (where the ad code itself is added). And from the function I get the code in the page.

<div class="topad">
    <div class="adh" id="adbox"><?php echo get_option('amn_topad'); ?></div>
</div>

I probably have the right code for this but it may be placed in the wrong place. I have used in the header.php (where the div is located):

if ($(window).width() < 700) {
  $('.topad').remove();
}

and

$(document).ready(function () {
if ($(window).width() < 700) {
  $('.topad').remove();
}
});

I have also tried to make a custom.js with the same codes as before and add to functions.php

function my_scripts_method() {
   wp_register_script('custom_script',
   get_template_directory_uri() . '/js/custom.js',
   array('jquery'),
   '1.0' );
  wp_enqueue_script('custom_script');
  }
add_action('wp_enqueue_scripts', 'my_scripts_method');

I don't know if it's possible but a simpler and efficient way would be to prevent the div to appear by inserting an "if" directly in element

<div class="adh" id="adbox"><?php if() {echo get_option('amn_topad');} ?></div>

Answer 1

Removing the element completely is not the way that the industry is going - you might want to do that still, but please consider the counter-arguments:

• The element won't be showing back if the screen gets resized up over the threshold
• To remove the element after the user resizes down under the threshold, you must detect this behavior with JS, which complexifies the code
• The element might be useful to other parts of your code

The way that is widely adopted in the industry to change display based on size width is to use media queries . Here's a quick demo to show/hide elements based on the screen size (over or under 700px) - resize your window to make it work!

 @media (max-width: 700px) { /* mobile CSS: hide .desktop div */ .desktop { display: none } } @media (min-width: 700px) { /* desktop CSS: hide .mobile div */ .mobile { display: none } } 

 <div class="mobile"> I appear only on mobile devices! (screen width less than 700) </div> <div class="desktop"> I appear only on desktop devices! (screen width over 700) </div>