Equal block heights: how do I make the heights equal on smaller screens?

Site URL: https://deliamonk.com/services

Hi!

To create pricing tables I've used image stack blocks with some code to style but the heights are all different. I added code to make them equal height but this code isn't responsive, so they're not equal heights on smaller screens (mobile is fine as it stacks).

Does anyone have code to remedy this?

On 8/9/2021 at 6:06 PM, kayleigh said:

Site URL: https://deliamonk.com/services

Hi!

To create pricing tables I've used image stack blocks with some code to style but the heights are all different. I added code to make them equal height but this code isn't responsive, so they're not equal heights on smaller screens (mobile is fine as it stacks).

Does anyone have code to remedy this?

Hi

Add to Design > Custom CSS

/* services-equal height boxes */
@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1626015402372_31686+.row {
    display: flex;
    flex-wrap: nowrap;
}
div#block-yui_3_17_2_1_1626015402372_31686+.row>.span-4:not(:nth-child(2)) {
    background-color: RGBA(242, 247, 250, 1);
    border: 1px solid RGBA(190, 211, 229, 1);
    margin-left: -1px;
}
div#block-yui_3_17_2_1_1626015402372_31686+.row>.span-4 .image-block {
    padding: 0px !important;
}
}

Thanks so much @tuanphan,

You seem to be the forum hero! Only just seeing this, I didn't get a notification that you'd replied 😞 

I got my wordpress developer to fix this last week, but I'll save this for future sites.

Appreciate you 😁