how to display an element only on mobile view?

Question

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

Answer 1

You will need to use combination of @media with max-width and min-width.

• Use min-width to show or hide the block above some break point. in this example i am using 480px. you can change as per your requirement.
• Use max-width to show or hide the block below your breakpoint.

run the snippet in full screen and try to resize the window down below to 480px and you will see the result.

@media screen and (max-width: 480px) {
  .show-on-desktop {
    display: none;
  }
}

@media screen and (min-width: 481px) {
  .hide-on-desktop {
    display: none;
  }
}

<div>
   <div class="show-on-desktop hide-on-mobile">
      <h1>This is for desktop</h1>   
      <img src="https://via.placeholder.com/350" alt="" />
   </div>
   
   <div class="show-on-mobile hide-on-desktop">
     <h2>This is for mobile</h2>
     <img src="https://via.placeholder.com/250" alt="" />
   </div>
</div>

Answer 2

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>