Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


kayleigh

Question

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?

Screenshot 2021-08-09 at 12.04.09.png

Link to comment

2 answers to this question

Recommended Posts

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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 😁

Edited by kayleigh
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...