[Support request] space issue when change product columns to flex

Home Forums Support space issue when change product columns to flex

  • This topic has 1 reply, 2 voices, and was last updated 1 year ago by David.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1005553
    Long

    Can you help me to check? I updated CSS as below to use flex on mobile but the first & last row of products on the homepage has an issue and they are not aligned correctly like other ones.

    On product category pages everything is good, except the homepage where I use the product shortcode

    Thanks a lot

    @media (max-width: 768px) {
    .woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }
    
    .woocommerce ul.products li.product {
    background: #fff;
    padding: 3px;
    margin: 0 0 0.5em 0!important;
    width: 47%!important;
    border-radius: 3px;
    }
    }
    #1005600
    David
    Staff
    Customer Support

    Hi there,

    include this within your Media query to remove the clearfix elements:

    .woocommerce .products ul::after,
    .woocommerce .products ul::before,
    .woocommerce ul.products::after,
    .woocommerce ul.products::before {
        display: none;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.