Call us (08) 8358 2552 info@eighty8design.com.au

by | Nov 12, 2017

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.

2 Comments

  1. Heloish

    Hi Guys

    Is there any way to use this same method to change the divi breakpoint for everything rather than only for Woocommerce pages. A 4 column page would have the same issue on ipad

    Reply
  2. Erik

    Thanks for sharing this! I spent a good amount of time working on a much less elegant solution before I found this. Much appreciated! 🙂

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

[Solved] Divi & WooCommerce Products Grid Display Problem on iPad was last modified: November 12th, 2017 by Eighty8Design