How to make all boxes the same height?

Hi @syzygist,

Please put the below CSS code in plugin custom CSS

.wpsm_row {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 30px;
}

#wpsm_service_b_row_1166 .wpsm_serviceBox {
    padding: 20px 10px 20px 10px;
    text-align: center;
    transition: all 0.3s ease 0s;
    background: #ffffff;
    height: 100%;
}

If it works let us know

Thanks

Yes! That worked! (though I reduced the bottom margin to 0px so there wouldn’t be a wider gap between the 3rd and 4th boxes on a phone). Thank you!

Is there anything that can be done about the 3rd box wrapping to its own line (with two-box rows above and below it) on a tablet?

Hi @syzygist,

Please correct the previous code with the below code.

.wpsm_row {
    
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 30px !important;
}

#wpsm_service_b_row_1166 .wpsm_serviceBox {
    height: 100%;
}

@media screen and (max-width: 768px) {
   .wpsm_row {
     display: block !important;
  }
}

if it works let us know

Thanks

I like that, though I added this to remove the extra space between the 3 and 4th boxes on tablet and phone.

margin-bottom: 0px !important;
}

to

@media screen and (max-width: 768px) {
   .wpsm_row {
     display: block !important;
  }
}

So now

@media screen and (max-width: 768px) {
   .wpsm_row {
     display: block !important;
margin-bottom: 0px !important;
  }
}

Thank you very much for your help! I appreciate the options for all aspects of box design – it’s a very nice plugin.

Hi @syzygist,

Glad that your issue has been resolved if you like our plugin please rate us.

Thank you