Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 19, 2017 at 7:41 pm #736037
    DigitalEssence

    Hi,

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

    January 25, 2017 at 6:54 am #738142
    Ismael

    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

    January 27, 2017 at 1:39 pm #739355
    DigitalEssence

    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.

    January 28, 2017 at 9:29 pm #739793
    Nikko

    Hi,

    Glad that we could help :)

    Best regards,
    Nikko

  • Author
    Posts
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.