Products Stacks on Mobile View

  • Resolved TheBusinessCat

    (@thebusinesscat)


    2 years, 4 months ago

    Hi there,

    I use the Divi theme and have an issue with the mobile views from 980px and down. The slider works correctly on desktop views.

    On mobile view, the products stack underneath each other and they are quite large. I noticed in the forum that there were similar issues to mine, and see that it could be a theme issue. I could not find any support threads for Divi specifically and wonder if you could please assist.

    Thank you,

    Ryan.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor Ketan Patel

    (@patelketan)

    Hello,

    Thanks for reaching here…

    Actually, Your theme media query CSS conflicts with the plugin so please check your side because theme CSS overrides our plugin CSS. so please contact your theme author.

    Please refer to the below screenshot.
    https://prnt.sc/lcTXhP_9e2NE

    Thanks,

    Plugin Author Anoop Ranawat

    (@anoopranawat)

    Hello @thebusinesscat

    Please try this custom css:

    @media (max-width: 767px)
{
.wcpscwc-product-slider ul.products li.product:nth-child(n){margin:0px !important; width: inherit !important;}
}

@media (max-width: 479px)
{
.wcpscwc-product-slider ul.products li.product:nth-child(n){margin:0px !important; width: inherit !important;}
}

    Add this css under custom css section of your theme and let check it again.

    • This reply was modified 2 years, 4 months ago by Anoop Ranawat.
    Thread Starter TheBusinessCat

    (@thebusinesscat)

    Hi @anoopranawat and @patelketan,

    Thank you for assisting. Unfortunately, that code did not work.

    From @patelketan post, it seems that Divi is the issue. I notice your pro version integrates seamlessly with Divi. Does the free version not integrate with Divi.

    Regards,

    Ryan

    Plugin Author Anoop Ranawat

    (@anoopranawat)

    Hello @thebusinesscat

    The free version inherit Products loop from WooCommerce but if your theme has customize the WooCommerce css then in slider css may conflict.

    In the pro version we have used our own classes and custom product loop as a result conflict is not possible.

    Can you please share the css screenshot ie where you have added the css?

    Plugin Author Anoop Ranawat

    (@anoopranawat)

    Hello @thebusinesscat

    I inspect your theme but not able to find the css that i shared with you.

    Thread Starter TheBusinessCat

    (@thebusinesscat)

    Hi @anoopranawat,

    I checked to make sure I saved the CSS, and I did, and I also used the inspect tool and the CCS shows there to.

    Please see attached image https://prnt.sc/jzbzNL0QjlZ0

    Thank you,

    Ryan

    Plugin Author Anoop Ranawat

    (@anoopranawat)

    Hello @thebusinesscat

    Ok please first remove this property : width: inherit !important; from the css given by me.

    Now i can see some inline css have given :

    @media (max-width: 767px)
.woocommerce-page ul.products li.product:nth-child(n) {
  margin: 0 9.5% 9.5% 0 !important;
  width: 45.25% !important;
  clear: none;
}

    You need to remove !important from width: 45.25%
    I am not getting from where its coming.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Products Stacks on Mobile View’ is closed to new replies.