Making blocks same height and size on different screen sizes

Site URL: https://alexandrosporfyris.squarespace.com

Hello,

I am trying to match the height size of the accordion blocks no matter what browser size, you see currently they do not match. How can I do this?

Password for the website is 'alexporfyris21'

Maybe @tuanphancan help please?

Thanks in advance.

On 12/5/2021 at 6:39 PM, whoshenry said:

Site URL: https://alexandrosporfyris.squarespace.com

Hello,

I am trying to match the height size of the accordion blocks no matter what browser size, you see currently they do not match. How can I do this?

Password for the website is 'alexporfyris21'

Maybe @tuanphancan help please?

Thanks in advance.

Add to Design > Custom CSS

/* accordion blocks same height homepage */
@media screen and (min-width:992px) {
body.homepage .accordion-item__description {
    min-height: 450px;
}
}
@media screen and (max-width:991px) and (min-width:768px) {
body.homepage .accordion-item__description {
    min-height: 800px;
}
}

On 12/8/2021 at 11:15 AM, tuanphan said:

Add to Design > Custom CSS

/* accordion blocks same height homepage */
@media screen and (min-width:992px) {
body.homepage .accordion-item__description {
    min-height: 450px;
}
}
@media screen and (max-width:991px) and (min-width:768px) {
body.homepage .accordion-item__description {
    min-height: 800px;
}
}

 

Thanks, this works when the accordion blocks are opened but when they're not they still don't match. Please see the screenshot.

On 12/10/2021 at 6:43 PM, whoshenry said:

Thanks, this works when the accordion blocks are opened but when they're not they still don't match. Please see the screenshot.

Because text above it not align

You can add this CSS to add some space on right read more

/* Flair right accordion */
@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1638619198382_52112 {
    margin-top: 5px;
}
}

7 hours ago, tuanphan said:

Because text above it not align

You can add this CSS to add some space on right read more

/* Flair right accordion */
@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1638619198382_52112 {
    margin-top: 5px;
}
}

 

Thanks for the code, I appreciate it - I've been testing it but it's difficult to cater for all screen sizes, is there an easier bit of code to work across devices where the accordions align?

On 12/12/2021 at 4:01 PM, whoshenry said:

Thanks for the code, I appreciate it - I've been testing it but it's difficult to cater for all screen sizes, is there an easier bit of code to work across devices where the accordions align?

The only way is set height for text above accordion. What do you think?

On 12/14/2021 at 3:27 PM, tuanphan said:

The only way is set height for text above accordion. What do you think?

Yes, let's go with this please. Any help is appreciated.

On 12/16/2021 at 4:08 PM, whoshenry said:

Yes, let's go with this please. Any help is appreciated.

Can you remove margin top first?

On 12/19/2021 at 9:24 AM, tuanphan said:

Can you remove margin top first?

Okay, all code relating to the accordion is removed.