Jump to content

Making blocks same height and size on different screen sizes

Recommended Posts

  • Replies 8
  • Views 602
  • Created
  • Last Reply

Top Posters In This Topic

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

 

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
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.

Screenshot at Dec 09 12-44-28.png

Screenshot at Dec 09 12-45-44.png

Link to comment
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.

Screenshot at Dec 09 12-44-28.png

Screenshot at Dec 09 12-45-44.png

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

 

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
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?

Link to comment
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?

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

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.