Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #736037


    a while back I received some excellent css advice which enabled me to target the nth-child background colour of .products li in a Woocommerce category loop. This enabled me to have every odd product background showing a background colour. This worked well and the client was very happy.

    Fast forward a year and we are now re-doing their site in a full width layout. The problem I now have is that the li loop is sitting at the far left of the window.

    View post on

    We would like the product loop to line up with the two 1/2 columns above so that the products line up neatly.

    I can do this in a large browser windows using:

    .av-product-class- {width:100%!important; padding-left:18%; padding-right: 10%;}

    View post on

    This works nicely in large browsers but as soon as I start to reduce the window down, the % values I’ve used don’t work any more and the product loop is off centre. Normally I would try and use a media query to sort this and I can do this when it gets down to ipad and iPhone sizes but is there a way to centre this in the browser so that it matches the content width?

    The site is at:

    And the product loop is a code block within a coloured section. I’ve tried placing it within a full 1/1 column but this didn’t help.

    I’m now turning to you for some of your amazing css magic, hoping that this can be achieved.

    Thanks as always.


    Hey DigitalEssence!

    Thank you for using Enfold.

    Please replace the css code with the following.

    .av-product-class- {
        width: 100%;
        outline: 2px orange solid;
    .av-product-class- a {
        max-width: 1200px;
        margin: 0 auto;

    You can use css media queries if it requires adjustments on smaller screens.



    Hi Ismael,

    thanks for that.

    While it didn’t completely resolve the issue, it did set me off on a path that has sorted it so I’m all good now.

    Thanks again.



    Glad that we could help :)

    Best regards,

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘HOWTO: Centre align a woocommerce product loop within a fullwidth colour section’ is closed to new replies.