title: How to make click event listener work on mobile screen size only?
body: <p>I am coding a website and have run in to a javascript issue that I do not know how to fix. On a desktop display you can mouseenter on a photo of the business and text and an iframe will display. However, on mobile it will not display the text or iframe due to there being no mouseenter. How can I make a function to set up a click event listener that only fires on a mobile sized browser? Here is my current function for desktop:</p>
  
  <pre><code>var locationDependentText = (function() {
      var displayText, starterText, locationText, photo1, photo2, photo3, manchesterText; 
  
      displayText = function(current, text) {
          current.addEventListener('mouseenter', function() {
              starterText.textContent = '';
              starterText.insertAdjacentHTML('afterbegin', text);
          });
          current.addEventListener('mouseleave', function() {
              starterText.textContent = '';
              starterText.insertAdjacentHTML('afterbegin', '&lt;h3 class="heading-tertiary u-center-text u-margin-bottom-small"&gt;Weve got one near you!&lt;/h3&gt;&lt;p class="paragraph"&gt;With 3 locations evenly spread across St. Louis, were guaranteed to be near you so you can have delicious shaved ice whenever you get a craving!&lt;/p&gt;');
          });
      }
  
      //Select starter text div and div that will contain js injection
      starterText = document.querySelector('#starterText');
  
      locationText = document.querySelector('#locationText');
  
      //select photos to dispay text from
      photo1 = document.querySelector('.composition__photo--p1');
      photo2 = document.querySelector('.composition__photo--p2');
      photo3 = document.querySelector('.composition__photo--p3');
  
      //Define text
      manchesterText = '&lt;h3 class="heading-tertiary u-center-text u-margin-bottom-small"&gt;Manchester Location&lt;/h3&gt;&lt;p class="paragraph"&gt;This is our Manchester Missouri location. Opened way back in 2007, this stand became an almost overnight success. We have served thousands of shaved ice at this location. Come see it at 126 Old Meramec Station Rd. Manchester, MO 63021&lt;/p&gt;&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3118.4965465596865!2d-90.51352768457544!3d38.59143997961899!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87d8d39480cf1df9%3A0x13b0982382daccd9!2s126+Old+Meramec+Station+Rd%2C+Ballwin%2C+MO+63021%2C+USA!5e0!3m2!1sen!2sdk!4v1552108901833" align="center" width="300" height="225" frameborder="0" style="border:0" allowfullscreen&gt;&lt;/iframe&gt;';
      cityText = '&lt;h3 class="heading-tertiary u-center-text u-margin-bottom-small"&gt;South City Location&lt;/h3&gt;&lt;p class="paragraph"&gt;Our second location located in St. Louis at the intersection of Holly Hills and Morganford rd. A great spot to chill out and have some delicious shaved ice. Find us at 4175 Holly Hills Blvd St. Louis, MO 63116&lt;/p&gt;&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d779.857869225666!2d-90.27366107076527!3d38.56991059872641!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87d8b5d86872a3bd%3A0x33e65c3aebf2cec4!2s4175+Holly+Hills+Blvd%2C+St.+Louis%2C+MO+63116%2C+USA!5e0!3m2!1sen!2sdk!4v1552110494451" width="300" height="225" frameborder="0" style="border:0" allowfullscreen&gt;&lt;/iframe&gt;';
      ellisvilleText = '&lt;h3 class="heading-tertiary u-center-text u-margin-bottom-small"&gt;Ellisville Location&lt;/h3&gt;&lt;p class="paragraph"&gt;This is our newest location opened in 2019! We are excited to offer shaved ice to all the Ellisville and Wildwood residents! Located behind Pro Tech collision center. Find us at 16360 Truman Rd, Ellisville, MO 63011&lt;/p&gt;&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3118.7058102564747!2d-90.61407658457557!3d38.586621979619686!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87d92a12923405c9%3A0x16edf5e7fbe73ddd!2sPro-Tech+Collision+Center!5e0!3m2!1sen!2sdk!4v1552110919907" width="300" height="225" frameborder="0" style="border:0" allowfullscreen&gt;&lt;/iframe&gt;';
  
      //Add event listener to check for hover on photo
      displayText(photo1, manchesterText);
      displayText(photo2, cityText);
      displayText(photo3, ellisvilleText);
  
  
  
  
  })();
  </code></pre>