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

    Hi,

    a while back I received some (Purchase code hidden if logged out) -of-woocommerce-products-li/”>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 imgur.com

    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 imgur.com

    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: http://ridelines.digitalessence.net/group-mtb-courses/

    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.

    #738142

    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.

    Regards,
    Ismael

    #739355

    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.

    #739793

    Hi,

    Glad that we could help :)

    Best regards,
    Nikko

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.