Jump to content

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

Recommended Posts

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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.