Title: Responsive design
Last modified: August 20, 2016

---

# Responsive design

 *  [crodesign](https://wordpress.org/support/users/crodesign/)
 * (@crodesign)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/responsive-design-6/)
 * What would I need to do and to what file, to not load the JS but do load an image(
   random or first in list) if the browser viewport is less than some dimension,
   say, 600 pixels? This is a need to be properly responsive so the user doesn’t
   download many images (or even large ones) when on a mobile device.
 * Below is my mod to the pub_footer.html.twig file. This did not work but rather
   killed the script completely.
 *     ```
       if (screen.width<=799)
       {
           /*<![CDATA[*/
           {# UNCOMPRESSED:
           try {
               (function($){
                   myatu_bgm.addTopImage(
                       "{% if opacity < 100 %}-moz-opacity:.{{ opacity }};filter:alpha(opacity={{ opacity }});opacity:.{{ opacity }};{% endif %}",
                       function() {
                           // Either fade in or display immediately
                           if ((typeof myatu_bgm !== "undefined") && (myatu_bgm.initial_ease_in === "true")) {
                               $(this).fadeIn("slow");
                           } else {
                               $(this).show();
                           }
                       }
                   );
               }(jQuery));
           } catch(e) {}
           #}
           try{(function(a){myatu_bgm.addTopImage("{% if opacity < 100 %}-moz-opacity:.{{ opacity }};filter:alpha(opacity={{ opacity }});opacity:.{{ opacity }};{% endif %}",function(){if((typeof myatu_bgm!=="undefined")&&(myatu_bgm.initial_ease_in==="true")){a(this).fadeIn("slow")}else{a(this).show()}})}(jQuery))}catch(e){};
           /*]]>*/
       }
       else
       {
         <img id="myatu_bgm_top" class="myatu_bgm_fs" src="{{ random_image.url }}" alt="{{ random_image.alt }}" {% if opacity < 100 %}style="-moz-opacity:.{{ opacity }}; filter:alpha(opacity={{ opacity }}); opacity:.{{ opacity }};"{% endif %}  />
       }
       ```
   
 * Thank you in advance.
 * [http://wordpress.org/extend/plugins/background-manager/](http://wordpress.org/extend/plugins/background-manager/)

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Anonymous User 4048828
 * (@anonymized-4048828)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/responsive-design-6/#post-3494005)
 * Hi!
 * You could replace the current `<script>...</script>` in that file with:
 *     ```
       <script type="text/javascript">
           /*<![CDATA[*/
           try {
               (function($){
                   if ($(window).width() > 799) {
                       myatu_bgm.addTopImage(
                           "{% if opacity < 100 %}-moz-opacity:.{{ opacity }};filter:alpha(opacity={{ opacity }});opacity:.{{ opacity }};{% endif %}",
                           function() {
                               // Either fade in or display immediately
                               if ((typeof myatu_bgm !== "undefined") && (myatu_bgm.initial_ease_in === "true")) {
                                   $(this).fadeIn("slow");
                               } else {
                                   $(this).show();
                               }
                           }
                       );
                   }
               }(jQuery));
           } catch(e) {}
           /*]]>*/
           </script>
       ```
   
 * But this would not mean it is responsive, just disabled entirely if the initial
   screen width is 799 pixels or less; this includes Background Manager’s ability
   to detect change of orientation (landscape/portrait mode).
 *  Thread Starter [crodesign](https://wordpress.org/support/users/crodesign/)
 * (@crodesign)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/responsive-design-6/#post-3494014)
 * I had a feeling it was something like that.
 * This would be a very large step in the right direction. Now that I see this working,
   I hope I can complete the rest of the functions to make it “Responsive” (or at
   least bandwidth responsible).
 *  Thread Starter [crodesign](https://wordpress.org/support/users/crodesign/)
 * (@crodesign)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/responsive-design-6/#post-3494101)
 * Adding a low-res image to my stylesheet for the breakpoint in the above script,
   I am able to provide a workaround to making your plugin responsive. When I have
   more time, I will make changes to your script. I would be happy to share it with
   you when it is completed.
 * Thank you for your very quick help in my simple matter above.
 *  [Ramzii](https://wordpress.org/support/users/ramzii/)
 * (@ramzii)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/responsive-design-6/#post-3494252)
 * So, any news on this matter? Thanks

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Responsive design’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/background-manager_7c828e.svg)
 * [Background Manager](https://wordpress.org/plugins/background-manager/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/background-manager/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/background-manager/)
 * [Active Topics](https://wordpress.org/support/plugin/background-manager/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/background-manager/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/background-manager/reviews/)

 * 4 replies
 * 3 participants
 * Last reply from: [Ramzii](https://wordpress.org/support/users/ramzii/)
 * Last activity: [12 years, 10 months ago](https://wordpress.org/support/topic/responsive-design-6/#post-3494252)
 * Status: not resolved