CODEWITHSUNDEEP
cssflexbox
Victoria Whitehead
Victoria Whitehead

Reputation: 21

Flex items not 'stretching'

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

Upvotes: 0

Views: 589

Answers (2)

amanda-ariyaratne
amanda-ariyaratne

Reputation: 111

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;
}

Upvotes: 0

Victoria Whitehead
Victoria Whitehead

Reputation: 21

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;
}

Upvotes: 2

Related Questions