Title: Javascript add if width screen
Last modified: August 22, 2016

---

# Javascript add if width screen

 *  [Cealin](https://wordpress.org/support/users/cealin/)
 * (@cealin)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/javascript-add-if-width-screen/)
 * Hello,
 * I use the following javascript code to make it that my products page shows 4 
   products in a row instead of 3:
 *     ```
       add_filter('loop_shop_columns', 'loop_columns');
       if (!function_exists('loop_columns')) {
       	function loop_columns() {
       		return 3; // 3 products per row
       	}
       }
       ```
   
 * This code works well.
    However, I only want this to happen when screen width 
   is 1345px or larger. If smaller I just want it to be the standard 3 products 
   per row.
 * I’ve searched and tried different codes, but each time my website becomes blank.
 * I found this:
 *     ```
       if ( $(window).width() > 1345) {
         //Add your javascript for large screens here
       }
       else {
         //Add your javascript for small screens here
       }
       ```
   
 * But how to integrate this code into the first code?
 * Thanks!

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

 *  [Senff – a11n](https://wordpress.org/support/users/senff/)
 * (@senff)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/javascript-add-if-width-screen/#post-5728256)
 * You can’t really mix the two.
 * The first piece of code is server-side PHP-based code (this is executed before
   anything is sent to the browser, so the browser size will have no impact on this).
 * The second piece is client-side Javascript (this is executed on the visitor’s
   computer, based on the browser size).
 * Though I’m not sure what plugin you use to show/sell products, what you could
   do is to show 99999 products in a row, and then use JavaScript (or CSS) to divide
   that one row into smaller rows (of 3 or 4 products).
 * Hope this makes sense.
 *  [Lucas Karpiuk](https://wordpress.org/support/users/karpstrucking/)
 * (@karpstrucking)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/javascript-add-if-width-screen/#post-5728257)
 * Hi Cealin,
 * It’s possible that this can be accomplished purely using CSS. Can you provide
   a link to your site?
 *  [travinum1](https://wordpress.org/support/users/travinum1/)
 * (@travinum1)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/javascript-add-if-width-screen/#post-5728261)
 * Just use CSS media queries (what karpstrucking was hinting at):
 * Forget about server-side code for that..
 *     ```
       @media (min-width: 1345px) {
        /*
        * CSS Rules
        * Go Here
        */
       }
       ```
   
 *  Thread Starter [Cealin](https://wordpress.org/support/users/cealin/)
 * (@cealin)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/javascript-add-if-width-screen/#post-5728309)
 * Thanks for the quick and useful responses! Now I understand why i ended up with
   a blank page 😀
 * I will look into using CSS to control the amount of products showed per row.
 * The website is [http://www.hildegardwinkel.nl](http://www.hildegardwinkel.nl)
   by th way :).

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

The topic ‘Javascript add if width screen’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 4 participants
 * Last reply from: [Cealin](https://wordpress.org/support/users/cealin/)
 * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/javascript-add-if-width-screen/#post-5728309)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics