3 Replies Latest reply on Sep 15, 2014 8:16 AM by Preran

    Loading different banners into html file depending on screen width? (Responsive)

    Portal2thePacific Level 1

      I have a html file that has my banner in it. I call my banner into the html file with this script in the head section: <script type="text/javascript" charset="utf-8" src="banner_edgePreload.js"></script>

       

      I also have a second banner called banner2. So all I have to do to switch the banners in my html file is put a 2 after the word banner in the script above ^ because they use the same resources.

       

      Now im trying to get it to change from banner to banner2 when screen width is 1200 or less.

       

      I was using this code but it doesn't seem to be working:

       

      <script type="text/javascript" charset="utf-8" src="banner_edgePreload.js"></script>

         

      <script type="text/javascript" charset="utf-8" media="screen and (max-device-width: 1200px)" src="banner2_edgePreload.js"></script>

       

      Any ideas on how I can get this to work?

       

      Thanks!