Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Flex items not 'stretching' – Woocommerce

I am using CSS Flex Box to display the items in my woocommerce shop on MOBILE view. http://www.crussh.com/shop/

In the outer box I have the following css

@media screen and (max-width: 768px)
#wpv-view-layout-16231-TCPID16485 {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 0 10px;
}

And the item css is as follows

@media screen and (max-width: 768px)
body.woocommerce .item {
    border: 1px solid #eee;
    text-align: center;
    padding-bottom: 10px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: calc(50% - 30px) !important;
    padding: 0 10px 10px !important;
    box-shadow: 0px 1px 0px rgba(0,0,0,.1);
    background: #fff;
    height: 100%;
    border-radius: 10px;
}

But for some reason, the items are not stretching..Click here for image
How can I make the product item boxes the same height?
Thank you

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got it to work. I changed the height property within the.item to auto..

    .item {
    border: 1px solid #eee;
    text-align: center;
    padding-bottom: 10px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: calc(50% - 30px) !important;
    padding: 0 10px 10px !important;
    box-shadow: 0px 1px 0px rgba(0,0,0,.1);
    background: #fff;
    height: auto;
    border-radius: 10px;
}

  2. 0

    You can use min-height instead of height for .item

    @media screen and (max-width: 768px)
body.woocommerce .item {
    border: 1px solid #eee;
    text-align: center;
    padding-bottom: 10px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: calc(50% - 30px) !important;
    padding: 0 10px 10px !important;
    box-shadow: 0px 1px 0px rgba(0,0,0,.1);
    background: #fff;
    min-height: 100%;
    border-radius: 10px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search