items in shop page not aligned on ipad

  • Resolved Jods

    (@jods)


    9 years, 3 months ago

    Hi,
    In my shop page of vantage/woo commerce my products are a little out of alignment, I think it is because of the text, but I’m wondering if I put a bit more padding between the row if this would fix the problem. The problem is only with ipad landscape mode.

    Here is a snap shot of the problem:
    https://www.scrapbookingdelights.com.au/?p=2838

    Any suggestions or help is appreciated, thank You

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Jods

    (@jods)

    I have tried this but it did not work:

    @media (max-width: 1024px) {
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-bottom: 30px;
    }
    }

    Hey Jods

    The challenge is coming from this Custom CSS rule:

    /* Woocommerce creates 5 products across the page */
woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    float: none;
    width: 16%;
    display: inline-block;
}

    Specifically, float: none; is causing the problem.

    Thread Starter Jods

    (@jods)

    Hey Misplon,
    Thanks I tried everything with the float: rule but nothing helped,
    but i did find something that did fix it nicely and its all looking very good, the fix was this:

    .woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {
    padding: .5em 0;
    margin: 0;
    font-size: 1em!important;
    min-height: 44px;
    }

    Worked a treat, thanks again for answering and helping
    Hope this may help someone else

    Awesome ?? Glad to hear you found a solution.

    All the best.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘items in shop page not aligned on ipad’ is closed to new replies.