Shop page layout is different Safari and Firefox

Unite Theme
1

Hello,

First of all thanks for this beautiful theme - Unite -. Secondly, I am facing problem with shop page layout. In chrome looks great as in demo page showing four products in a row. However, in Firefox and Safari the layout looks mixed-up only showing two products in a row with big picture of the products.

The wired thing is that it was work perfectly in localhost before I upload it.

I tried every thing, re-install the theme, delete the child theme style sheet and re-install woocommerce but nothing work. Could you please look at this issue and troubleshot.

here is my website link https://mtaraabi.com

Thanks in advance
Mido

2

Hi Mido,

I hope you are well today and thanks for posting here.

I could confirm the issue on your site and it seems the issue of CSS conflict.

To resolve the issue could you please try adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Theme Options -> Other -> Custom CSS

body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product {
    float: left !important;
    margin: 0 3.8% 2.992em 0;
    width: 21.05%;
    clear: none;
}

body.woocommerce ul.products li.product:nth-child(4n+1),
body.woocommerce-page ul.products li.product:nth-child(4n+1){
    clear: left !important;
}

Best Regards,
Movin

3

Hi Movin,

thanks for the code I tried, but it’s not working. I also, I tried to play with the value of the margin and the width but still the same issue.

Waiting your advice and suggestion

Thanks in advance

4

Hi Mido,

The code should work fine.

How are you using it?

It seems you are using cache on your site so please try clearing cache after using the provided code.

Best Regards,
Movin

5

Hi Movin,

I use only W3 Total Cache plugin and I emptied all cache but still same issue. I do think there is a deference between Custom CSS and child theme stylesheet. However I added the code to my child theme stylesheet once and them I added it to the Custom CSS but it has same result.

Thanks in advance
Mido

6

Hi Movin,

You ware right there is a CSS conflict. when I turned W3 Total Cache off, the website return to the normal layout. However, I need to use W3 total cache so how I could configure it without harming CSS?.

Thanks in advance
Mido

7

Hi again, :slight_smile: I disable Minify and it is working fine now. but the page load is effected.

Thanks

8

Hi Mido,

The W3 Total Cache Minify functionality is not working with CSS properly is the issue of W3 Total Cache plugin so you can contact the W3 Total Cache plugin author on the following page to resolve the issue.

Best Regards,
Movin

9

Hi Movin,

Thanks for your help, really appreciated.

Thanks
Mido

10

You are most welcome here :slight_smile: