I am using WooCommerce to sell some services. These services are a total of 9 per product-category, so a nice 3 x 3 grid.
When you view the page on the iPad in landscape mode, all 9 products display nicely in 3 rows with 3 columns.
I.e.:
x x x
x x x
x x x
(x = product image/price)
However when you rotate from landscpae to portrait mode, the rows seem to break with a first row of 2 columns, one row with 3 columns, one row of one column and 2 empty spaces and then one row with 3 columns.
I.e.:
x x
xx x
x
x x x
(xx = mashed together, no spacing)
Adding this snippet to the functions.php of the child theme does seem to change the layout, but not with the wanted result:
// Change number or products per row to 3
add_filter(‘loop_shop_columns’, ‘loop_columns’);
if (!function_exists(‘loop_columns’)) {
function loop_columns() {
return 3; // 3 products per row
}
}
The rows and columns now look like this:
x x x
x
x x
x x x
Weird enough the first and third products have the appropriate css classes of “first” and “last” when you add the above snippet. When you remove the snippet the first and fourth products have the css classes of “first” and “last”.
I have tested this on two different setups. One local and the other on a semi-live server and this problem occurs on both sites and only in portait mode.
I think I may have narrowed the problem down to a possible conflict with woocommerce-smallscreen.css.
When I unset the loading of the WooCommerce stylesheets (woocommerce-layout.css, woocommerce-smallscreen.css and woocommerce.css) and then inline these in the style.css from the child theme I am seeing the columns displayed in a-typical way.
When i then remove the inlined style from woo commerce-smallscreen the columns appear in the normal way. Mind you that this happens on the “regular” desktop view.
Please have a look at line 44 in woocommerce-smallscreen.css
Weird thing is that the problem on the iPad now occurs in portait mode when “clear: both” is active. Deactivating “//clear: both” in style.css reverses the initial problem. Deactivating “clear: both” in woocommerce-smallscreen.css and then loading that (disabling the unset in functions.php) solves the problem both on desktop and the iPad.
I tried figuring out where the cached styles from the theme are rendered, but I can’t find the scripts for that. (lack of insight into the innerworkings of BB theme and plugin…)
Do you think you can share the URL to the site you’re playing around with so we can check the issue? You can post it as a private reply if you need to.
Just curious how you modified that file? As that is a file that gets generated dynamically, i.e., the changes you make there gets lost once it gets regenerated, which happens quite often.
Would it be possible to remove the changes you’ve made so we can check for the issue?
FTP’ed into the folder and edited the file. I didn’t have time yesterday to dive into the theme and find the less file that is generated and edit that code, but since skin-md5string.css is generated from the different less files, I guess the change needs to be made in "bb-theme -> less -> woocommerce.less -> line 768 to 790
I have removed the “clear: none” and the products are displaying in the a-typical way again (iPad in portrait mode that is)
Please have a look at one of the pages with the product-categories that can be found in the header navigation (i.e. Comments)
I was able to recreate this on our beta site and therefore, have reported it as a bug. In the meantime, you should be able to use following CSS to resolve the issue.