![[Solved] Divi & WooCommerce Products Grid Display Problem on iPad](https://eighty8design.com.au/wp-content/uploads/2017/11/flexbox-css-woocommerce.jpg)
[Solved] Divi & WooCommerce Products Grid Display Problem on iPad
Divi with Woocomerce product grid display problem on iPad in portrait mode solved
This issue occurs when using WooCommerce with Divi theme (quite likely other themes too). It affects the way products are displayed, but only on iPad mode when in portrait view. The images below show the issue.
When you view a WooCommerce product page on the iPad in landscape mode, all product will display nicely in rows of 4 products (or 3 products if your product page uses a sidebar). For example, if you have 12 products, it will display in 3 rows with 4 columns.
However, when you rotate from landscape to portrait mode the number of products in each row can become inconsistent. What should happen is the product page now displays 4 row of 3 columns, like this image below. Nice and organised.
However, with the issue between WooCommerce and Divi, the 12 products may instead look like this grid below here.
Quite obviously this is not a good result – it leaves the page looking like some products are missing, and it is likely to confuse your customers.
Why is this happening?
The issue occurs as result of WooCommerce’s chosen media breakpoint at 768px, which is the exact width of the iPad screen.
The lines of code that deal with WooCommerce’s responsive layout are contained in a stylesheet called woocommerce-smallscreen.css.
Inside this stylesheet, WooCommerce defines a default media breakpoint at 768px. It looks like this;
media="only screen and (max-width: 768px)".
( You can see the actual CSS (or Sass) that it uses, here:
https://github.com/woocommerce/woocommerce/blob/master/assets/css/woocommerce-smallscreen.scss )
That means that this stylesheet will only be applied to screen with a width less than 768 pixels w. However, the iPad screen is not smaller than 768px, it is 768px wide. Hence the issue.
How do I resolve it?
Simply add these lines of code to your functions.php. file (install a child theme first is recommended).
This will change the responsive breakpoint from 768px to 767px, and just like that the issue is resolved!!
Add the line below to the functions.php file:
// Define a new breakpoint for woocommerce-smallscreen.css
function marce_filter_woocommerce_style_smallscreen_breakpoint( $breakpoint ) {
$breakpoint = ‘767px’;
return $breakpoint;
};
add_filter( ‘woocommerce_style_smallscreen_breakpoint’, ‘marce_filter_woocommerce_style_smallscreen_breakpoint’, 10, 1 );
Resources
Resource 1. Working with WooCommerce’s “woocommerce-smallscreen.css” file
Resource 2. woocommerce-smallscreen.scss
Resource 3. SmallScreen CSS breakpoint 768
These resources are all thankfully shared on GitHub.
