title: media query for scrolling slideshow for display on different size devices
body: <p>I want to create a media query for a scrolling slideshow so that the images display at their native resolution of 960x540 px on a 1920x1080 monitor; but at 768x432 on a 1366x768 monitor.  I tried plugging in the recomputed values of the keyframes for the smaller screen in the media query but it did not work.  </p>
  
  <p>If anyone can help I'd be most appreciative as I have not worked extensively with media queries or animations.  Hopefully, I can extrapolate from an answer to further modify the slideshow for smaller devices too.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
  .wrapper_video_and_text {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      padding-top: 0px;
      justify-content: center;
      }
  .container_video {
      width: 55%;
      margin-left: 100px;
      }
  .wrapper_text {
      display: flex;
      width: 45%;
      overflow: hidden;
      min-height: 100%;
      justify-content: center;
      align-items: center;
      }
  .video_text {
      width: 50%;  
      font-family: "europa",sans-serif;
      font-size: 150%;
      letter-spacing: ;
      color: black;
      font-weight: 500;
      line-height: 125%;
      }
  .flex-container {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      padding-top: 0px;
      justify-content: center;
      align-items: center;
      }
  #css_slider {
      width: 960px;
      height: 540px;
      overflow: hidden;
  }
  #slider_images {
      width : 12480px;
      height: 540px;
      overflow: hidden;
      /* animation duration: 36s : 13x ~3s display image + 5x ~0.2s slide */
      animation: slide 36s infinite;
      -moz-animation: slide 36s infinite;
      -webkit-animation: slide 36s infinite;
      -o-animation: slide 36s infinite;
  }
  #slider_images img {
      float: left;
  }
      @keyframes slide{
      0%{margin-left: 0px;}
      4.7%{margin-left: 0px;}
      7.7%{margin-left: -960px;}
      12.4%{margin-left: -960px;}
      15.4%{margin-left: -1920px;}
      20.1%{margin-left: -1920px;}
      23.1%{margin-left: -2880px;}
      27.8%{margin-left: -2880px;}
      30.8%{margin-left: -3840px;}
      35.5%{margin-left: -3840px;}
      38.5%{margin-left: -4800px;}
      43.2%{margin-left: -4800px;}
      46.2%{margin-left: -5760px;}
      50.9%{margin-left: -5760px;}
      53.9%{margin-left: -6720px;}
      58.6%{margin-left: -6720px;}
      61.6%{margin-left: -7680px;}
      66.3%{margin-left: -7680px;}
      69.3%{margin-left: -8640px;}
      74%{margin-left: -8640px;}
      77%{margin-left: -9600px;}
      81.7%{margin-left: -9600px;}
      84.7%{margin-left: -10560px;}
      89.4%{margin-left: -10560px;}
      92.4%{margin-left: -11520px;}
      97.1%{margin-left: -11520px;}
      100%{margin-left: 0px;}
  }
      @-moz-keyframes slide{
      0%{margin-left: 0px;}
      4.7%{margin-left: 0px;}
      7.7%{margin-left: -960px;}
      12.4%{margin-left: -960px;}
      15.4%{margin-left: -1920px;}
      20.1%{margin-left: -1920px;}
      23.1%{margin-left: -2880px;}
      27.8%{margin-left: -2880px;}
      30.8%{margin-left: -3840px;}
      35.5%{margin-left: -3840px;}
      38.5%{margin-left: -4800px;}
      43.2%{margin-left: -4800px;}
      46.2%{margin-left: -5760px;}
      50.9%{margin-left: -5760px;}
      53.9%{margin-left: -6720px;}
      58.6%{margin-left: -6720px;}
      61.6%{margin-left: -7680px;}
      66.3%{margin-left: -7680px;}
      69.3%{margin-left: -8640px;}
      74%{margin-left: -8640px;}
      77%{margin-left: -9600px;}
      81.7%{margin-left: -9600px;}
      84.7%{margin-left: -10560px;}
      89.4%{margin-left: -10560px;}
      92.4%{margin-left: -11520px;}
      97.1%{margin-left: -11520px;}
      100%{margin-left: 0px;}
  }
  @-webkit-keyframes slide{
      0%{margin-left: 0px;}
      4.7%{margin-left: 0px;}
      7.7%{margin-left: -960px;}
      12.4%{margin-left: -960px;}
      15.4%{margin-left: -1920px;}
      20.1%{margin-left: -1920px;}
      23.1%{margin-left: -2880px;}
      27.8%{margin-left: -2880px;}
      30.8%{margin-left: -3840px;}
      35.5%{margin-left: -3840px;}
      38.5%{margin-left: -4800px;}
      43.2%{margin-left: -4800px;}
      46.2%{margin-left: -5760px;}
      50.9%{margin-left: -5760px;}
      53.9%{margin-left: -6720px;}
      58.6%{margin-left: -6720px;}
      61.6%{margin-left: -7680px;}
      66.3%{margin-left: -7680px;}
      69.3%{margin-left: -8640px;}
      74%{margin-left: -8640px;}
      77%{margin-left: -9600px;}
      81.7%{margin-left: -9600px;}
      84.7%{margin-left: -10560px;}
      89.4%{margin-left: -10560px;}
      92.4%{margin-left: -11520px;}
      97.1%{margin-left: -11520px;}
      100%{margin-left: 0px;}
  }
   @-o-keyframes slide{
      0%{margin-left: 0px;}
      4.7%{margin-left: 0px;}
      7.7%{margin-left: -960px;}
      12.4%{margin-left: -960px;}
      15.4%{margin-left: -1920px;}
      20.1%{margin-left: -1920px;}
      23.1%{margin-left: -2880px;}
      27.8%{margin-left: -2880px;}
      30.8%{margin-left: -3840px;}
      35.5%{margin-left: -3840px;}
      38.5%{margin-left: -4800px;}
      43.2%{margin-left: -4800px;}
      46.2%{margin-left: -5760px;}
      50.9%{margin-left: -5760px;}
      53.9%{margin-left: -6720px;}
      58.6%{margin-left: -6720px;}
      61.6%{margin-left: -7680px;}
      66.3%{margin-left: -7680px;}
      69.3%{margin-left: -8640px;}
      74%{margin-left: -8640px;}
      77%{margin-left: -9600px;}
      81.7%{margin-left: -9600px;}
      84.7%{margin-left: -10560px;}
      89.4%{margin-left: -10560px;}
      92.4%{margin-left: -11520px;}
      97.1%{margin-left: -11520px;}
      100%{margin-left: 0px;}
      }
      &lt;/style&gt;
      &lt;/head&gt;
   &lt;section class="flex-container"&gt;
      &lt;div id="css_slider"&gt;
       &lt;!-- Each image is 960px by 540px --&gt;
      &lt;div id="slider_images"&gt;
          &lt;img src="web_960_lg_edg_water.jpg" alt="water" /&gt;
          &lt;img src="web_960_lg_edg_blue.jpg" alt="blue" /&gt;
          &lt;img src="web_960_lg_edg_robins_egg.jpg" alt="robins egg" /&gt;
          &lt;img src="web_960_lg_edg_23rd_st.jpg" alt="23rd st" /&gt;
          &lt;img src="web_960_lg_edg_broken_guru.jpg" alt="broken guru" /&gt;
          &lt;img src="web_960_lg_edg_i_will_miss_you.jpg" alt="i will miss you" /&gt;
          &lt;img src="web_960_lg_edg_pants.jpg" alt="pants" /&gt;
          &lt;img src="web_960_lg_edg_nose.jpg" alt="nose" /&gt;
          &lt;img src="web_960_lg_edg_swirls.jpg" alt="swirls" /&gt;
          &lt;img src="web_960_lg_edg_church_ave.jpg" alt="church ave" /&gt;
          &lt;img src="web_960_lg_edg_network_reality_stars.jpg" alt="network reality all stars" /&gt;
          &lt;img src="web_960_lg_edg_ports.jpg" alt="ports" /&gt;
          &lt;img src="web_960_lg_edg_kline.jpg" alt="kline" /&gt;
      &lt;/div&gt;
      &lt;/div&gt;
         &lt;div class="wrapper_text"&gt;
          &lt;div class="video_text"&gt;
          &lt;p&gt;text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;/html&gt;
  </code></pre>