Problems with responsive-design of product category archive

Support
#1

Hi!

We’ve experienced problems with the responsive design of woocommerce product-category archives. We are using the Renew stack.

You can replicate the issue e.g. here https://trendraider.de/produkt-kategorie/themenboxen/

The problem occurs on approx. tablet size. Some images are side by side some are beneath each other. Please see the image attached.

(Note: we’ve tried this in our staging page with X 5.1.1 and X 5.2.5 plus WooCommerce 3.26 and WooCommerce 3.3.1 - it’s always the same problem. so outdated versions are not the problem here.)

Any help (css fix?) would be very welcome!

#2

Hello There,

Thanks for writing in! I can confirm that they are not aligned in grid. To resolve this, you may use this code:

@media (max-width: 979px){
  .woocommerce .cols-3 li.product:nth-child(2n), 
  .woocommerce .cols-4 li.product:nth-child(2n), 
  .woocommerce.columns-3 li.product:nth-child(2n), 
  .woocommerce.columns-4 li.product:nth-child(2n) {
    margin-right: 0 !important;
  }
}

Please clear your plugin cache and Autoptimize plugin cache first before testing the site.

#3

Thank you! Seems to work!

#4

You’re welcome.

#5

Ah sorry, we again :slight_smile: Any idea why it’s not working and what to do on https://trendraider.de/bestellen/?
We only have this two mentioned pages with product archives. The first one is working after your css-fix, but this one isn’t. I tried but I am not able to fix it.

#6

Hi There,

Please update the previous CSS to this:

.woocommerce .subcategory-products li.product,
.woocommerce-page .subcategory-products li.product {
    margin: 1.25% 2% 1.25% 0!important;
}
@media (max-width: 979px){
  .woocommerce .cols-3 li.product:nth-child(2n), 
  .woocommerce .cols-4 li.product:nth-child(2n), 
  .woocommerce.columns-3 li.product:nth-child(2n), 
  .woocommerce.columns-4 li.product:nth-child(2n) {
    margin-right: 0 !important;
  }
}

Hope it helps :slight_smile:

#7

Thanks but seems not work. I cleared all caches.
Please see screenshot for https://trendraider.de/bestellen/

#8

Hi,

Please try this code instead.

.woocommerce .subcategory-products li.product,
.woocommerce-page .subcategory-products li.product {
    width:22%;
}
@media (max-width: 979px){
  .woocommerce .cols-3 li.product:nth-child(2n), 
  .woocommerce .cols-4 li.product:nth-child(2n), 
  .woocommerce.columns-3 li.product:nth-child(2n), 
  .woocommerce.columns-4 li.product:nth-child(2n) {
    margin-right: 0 !important;
  }
}

Hope that helps.

#9

Thank you for your help but this is not what it should look like. See picture attached.

Why isn’t it possible just like on https://trendraider.de/produkt-kategorie/themenboxen/ (see first postings and answer of RuelNel which worked fine for this one page). We just want to have the correct and even amount of pictures per row and not tiny pictures and cut off texts like it is now:

#10

Hi there,

Have you added this code in the custom CSS?

.woocommerce .subcategory-products li.product, 
.woocommerce-page .subcategory-products li.product {
    width: 22%;
}

If so, kindly remove it because it is causing the products to display in 4 columns in all views.

In case it is a default CSS, please add this code:

@media (max-width: 979px) {
    .woocommerce .subcategory-products li.product, 
    .woocommerce-page .subcategory-products li.product {
        width: 48%;
        float: left;
    }

    .woocommerce .subcategory-products li.product:nth-child(2n), 
    .woocommerce-page .subcategory-products li.product:nth-child(2n) {
        margin-right: 0 !important;
    }    
}

@media (max-width: 480px) {
    .woocommerce .subcategory-products li.product, 
    .woocommerce-page .subcategory-products li.product {
        width: 100%;
        margin-right: 0 !important;
    }    
}

Hope this helps.

#11

Was added because paul.r from your staff suggested it. See his answer above.

I now removed all advice posted by many different staff members and hope some one will help us.

#12

Hi there,

It’s because each of CSS has its own purpose, it may only work on an intended element per issue which could affect or may not work on other elements. And it will really take a ton of CSS before you can achieve a no-issue setup.

Let’s go this route, don’t use any CSS (as they already defined in theme’s CSS).

We can simply add cols-2, cols-3, cols-4 to product’s <ul> through jQuery. Example, you can add this to the page’s cornerstone custom javascript.

jQuery('ul.subcategory-products').addClass('cols-4');

Those existing Classes are already responsive :slight_smile:

If you’re planning to apply different columns to a different group, then you’ll have to use unique classes as selectors. Example,

jQuery('ul.subcategory-products').addClass('cols-4');
jQuery('ul.subcategory-products-group-2').addClass('cols-2');

Thanks!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.