Loading...
  1. Welcome to the Upload WP Community Forums!  This is the best place to get premium WordPress and WooCommerce support.  Please take a look around and join the Upload WP Community for FREE today!

Centering products.

Discussion in 'Configuring WooCommerce' started by Kevin Hopwood, Aug 8, 2017.

  1. Kevin Hopwood

    Kevin Hopwood New Member Updated Profile

    Hi all.

    I'm trying to make my 2 packages idea by side in the center of the page.

    The page is located here:

    www.tramlinetraders.com/test

    The short code I used is:
    Code:
    [products skus="Vip-annual, vip-quarterly" orderby="date" order="desc"]
    The CSS I am using for this is:
    Code:
    .woocommerce ul.products li.product {
        width: 50%;
        max-width: 150px;
        float: none;
        margin: 0 auto;
    }
    It seems to be ok in mobile view but on desktop view it displays them as one below the other rather than side by side.

    Am I completely missing something?

    Thanks in advance.
    Kev
  2. TeddyTriton

    TeddyTriton Administrator Staff Member

    @Kevin Hopwood

    Add the following custom css

    Code:
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        width: 45%!important;
    }
    or possibly just this
    Code:
    li.product {
        width: 45%!important;
    }



    preview.png
  3. Kevin Hopwood

    Kevin Hopwood New Member Updated Profile

    @TeddyTriton

    Thank you. You are a legend. Been trying to sort that out for ages.