[Support request] Woocommerce Blocks – products not aligned on same row

Home Forums Support Woocommerce Blocks – products not aligned on same row

  • This topic has 3 replies, 2 voices, and was last updated 9 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1148127
    Louis Stanford

    I’ve added a Woocommerce Blocks Product grid on my home page. I’ve configured it as a 3-column block, but only two products appear on the first line, and the 3rd product is on the next line.

    I’ve added the following custom CSS as per one of your other KB articles:

    `li.wc-block-grid__product
    {
    padding: 20px;
    background: #333333;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    Margin: 10px;
    flex: 1 0 calc(30% – 16px)

    }’

    I don’t know whether this is a theme flex issue, or a Woocommerce Blocks issue. Would appreciate a nudge in the right direction.

    #1148356
    David
    Staff
    Customer Support

    Hi there,

    it is related to that CSS:

    li.wc-block-grid__product {
        padding: 20px;
        background: #333333;
        border-radius: 5px;
        background-color: white;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        Margin: 10px;
        flex: 1 0 calc(30% - 16px) !important; /* Add !important here */
    }

    See the last line add the !important statement – looks like woo has made a few changes to the block plugin again.

    #1148368
    Louis Stanford

    Spot on, worked first time! I’ll also log a ticket with the Woocommerce guys, this is not the first time this plugin has caused problems.

    Thanks again!

    #1148386
    David
    Staff
    Customer Support

    To be fair its the custom styling that is causing the issue.
    They have changed the specificity of their own CSS – which is fine – it just meant the custom CSS had to be bumped up another level.

    Glad to be of help

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.