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)

  • 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.

    Hi Cealin,

    It’s possible that this can be accomplished purely using CSS. Can you provide a link to your site?

    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

    (@cealin)

    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 https://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.