Time for action—hiding home page content

Let’s add our conditional tags to hide the content we don’t want to be sent to mobile devices. We can hide the content that we don’t need by performing the following steps:

1. 1. Firstly, let’s start with the header, and the header.php file. We need to hide the call to action button, which is displayed with the following code:

   <div class=”CTA”>
   <img src=”<?php bloginfo(‘stylesheet_directory’)?>/images/sundae-small.png” /><a href="#"”>Order ice cream online</a>
   </div>
   

2. 2. We will need to place a conditional tag around this so that it’s not displayed on mobile devices. The final code is as follows:

   <?php if ( !is_mobile() ) { ?>
   <div class=”CTA”>
   <img src=”<?php bloginfo(‘stylesheet_directory’)?>/images/sundae-small.png” /><a src=””>Order ice cream online</a>
   </div>
   <?php ; } else {
   ;
   } ?>
   

3. 3. So that’s how the header is done. We will click on Update File to save the changes...