Display issue with a WordPress product slider

I am using the WooCommerce product slider plugin to display a set of images on the footer of one of my client’s pages.

In one of the pages, the product slider is appearing on top of the content, and not below as it should. See http://www.mitholog.com/product/black-blue/ for an example. Make sure to click on the Reviews tab to see the issue. The slider appears on top of the review section.

Read More

I suspect it’s a CSS problem, since I don’t see any errors in the console. How would I even begin to troubleshoot this?

Here’s the code that displays it:

 <section id="cart-slider">
 <!-- Show responsive shopping cart item slider -->
 <?php if(function_exists('wa_wps_pro')){ echo wa_wps_pro(1);} ?>

And here’s the css for that section:

 #cart-slider{
       margin-top: 160px;
       margin-left: auto;
       margin-right: auto;
       max-width:900px;
       padding: 0;
   }

Related posts

1 comment

  1. The slider doesn’t have that issue after resizing the browser (i.e. emulating a smaller device such as a mobile phone) so a quick and dirty option is to increase the margin-top by the necessary amount:

    #cart-slider{
       margin-top: 300px;
       margin-left: auto;
       margin-right: auto;
       max-width:900px;
       padding: 0;
    }
    

    Though this will not give you a clean solution, it’s the only help i can give you considering most of the CSS related to the slider must be (I imagine) in the plugin files. Good luck!

Comments are closed.