WooCommerce

Solving Product Grid IPad Display Issues

I recently ran into this issue on a WooCommerce website and wanted to share!

I was viewing my WooCommerce site’s shop page on an iPad (portrait mode) and noticed the products were getting shifted (not as dramatically as this example, but still noticeable). After doing some Google searching, I found the following solution:

The following articles explain it better than I can, but in a nutshell the WooCommerce mobile breakpoint doesn’t align exactly with Divi’s.

Add the following code to the functions.php file:

add_filter('woocommerce_style_smallscreen_breakpoint','woo_custom_breakpoint');
function woo_custom_breakpoint($px) {
 $px = '767px';
 return $px;
}

And that should fix it! Here’s an article with a full explanation.

See our featured website design work

Check out some of the beautiful websites we’ve built for over 2,000 clients.

We offer WordPress support & maintenance

Shake the stress of ongoing maintenance with plans supported by our team of WordPress experts.

Related articles