how to display an element only on mobile view?

Im creating an email template on Eloqua, so what i have successfully did was hide an image when on mobile view. So it shows only on desktop view. Now im trying to do is to view another image only on mobile view and not on desktop view. How can i achieve this? Pls take a look at my code

@media (max-width: 480px) {
.size-controller {
  width: 100%;
}
.mobile-16px-font {
  font-size: 16px !important;
}
.mobile-hide {
  display: none !important;
}

.mobile-show {
  
}
.mobile-100-percent {
  width: 100% !important;
}
}

<br> <span style="font-size: 20px; color: #26478D;">April 30 Web event, 4.30-5.00pm</span>

                                         <img src="http://images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-hide" hspace="10">

                                         <img src="http://images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-show" hspace="10">

                                         <br><span style="font-size: 14px; color: rgb(87, 87, 85); border-style: none; padding-right: 10px; padding-bottom: 10px; padding-top: 10px;" class="mobile-16px-font">
                                    
                                    We did have something a bit more elaborate than a web event planned for April, however we’re equally excited to see how we go! We’ll be holding it at 4.30pm (EST) on April the 30th. <br><br>

                                          Tune in to hear more about how Experian has adjusted their way of doing business over the last couple of months, the latest features available in Aperture 2.0 and hear directly from a couple of our Advocates on how they have benefited from the Advocate program, and how they have adapted to the new norm.<br><br>
We’ll run the event via a Webex, all you will need to do is grab a drink and click this link a few minutes before the time;   <a href="https://oneexperian.webex.com/oneexperian/onstage/g.php?MTID=e3f8dd6ff4b183fc082b93cab47892e3f&elqTrackId=dde80b180c2f4e0d9ea2b393afa99c17&elqTrack=true" align="center" data-targettype="link" title="Link">Webex event – 30 April at 4.30pm</a></span><div class=""><br>

I cant seem to be able to show the image only on mobile view and not desktop view

Solution

You can add a similar logic to hide the .mobile-show image. Instead of using max-width: 480px, you can use min-width: 480px to only apply the show .mobile-hide on a viewport larger or equal to 480px.

Although unrelated to your case, I have concerns on your CSS and HTML. You shouldn't use !important carelessly. You should wrap text node in a HTML tag and heading should be wrapped with the heading tag (e.g. <h1>). Furthermore, in your case, it's better to use a CSS class than inline styles.

@media (max-width: 480px) {
  .size-controller {
    width: 100%;
  }
  .mobile-16px-font {
    font-size: 16px !important;
  }
  .mobile-hide {
    display: none;
  }
  .mobile-100-percent {
    width: 100% !important;
  }
}

@media (min-width: 480px) {
  .mobile-hide {
    display: inline;
  }
  .mobile-show {
    display: none;
  }
}

<h1 style="font-size: 20px; color: #26478D;">April 30 Web event, 4.30-5.00pm</h1>

<p>
  <img src="http://images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-hide" hspace="10">
  <img src="http://images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-show" hspace="10">
  <span style="font-size: 14px; color: rgb(87, 87, 85); border-style: none; padding-right: 10px; padding-bottom: 10px; padding-top: 10px;" class="mobile-16px-font">
                                    
  We did have something a bit more elaborate than a web event planned for April, however we’re equally excited to see how we go! We’ll be holding it at 4.30pm (EST) on April the 30th.<br>
  Tune in to hear more about how Experian has adjusted their way of doing business over the last couple of months, the latest features available in Aperture 2.0 and hear directly from a couple of our Advocates on how they have benefited from the Advocate program, and how they have adapted to the new norm.<br><br>
  We’ll run the event via a Webex, all you will need to do is grab a drink and click this link a few minutes before the time;   <a href="https://oneexperian.webex.com/oneexperian/onstage/g.php?MTID=e3f8dd6ff4b183fc082b93cab47892e3f&elqTrackId=dde80b180c2f4e0d9ea2b393afa99c17&elqTrack=true" align="center" data-targettype="link" title="Link">Webex event – 30 April at 4.30pm</a></span>
</p>