*** Uneven height of the 3 buttons for image stack blocks column SQUARESPACE 7.0

Hello,

Can anyone in the community help me with the alignment of the buttons of the image stack blocks to evenly horizontal? Ive tried button paddings, CSS height codes but it dosen't seem to work well. I have been looking at other forums, but it always customised to that particular page only. 

Much appreciated if anybody can help me with this. 

Many thanks,

Justin

Hi @tuanphan , I've seen you've successfully helped this problem before, I've tried to copy the code from previous page, but it won't work. Can you kindly help me out with this one? 

Best

Justin

This isn't the easiest problem to solve on 7.0, the ideal would be to copy-design the text to be the same length. But you can add CSS for desktop to have a minimum height for each text block, and that typically helps this in most situations. Can you provide your website URL and the page this is on so I can give you some code?

Thanks for helping, the website URL is https://www.lexta.co/celebration-of-craftsmanship

It's located towards the bottom of the site. I think adding CSS for desktop minimum height is a good way to do this. Mobile is already stacked upon each other. I'll let you decide which is best.

I look forward to your reply. 

On 3/8/2023 at 5:12 PM, Ziggy said:

Try this Custom CSS:

@media only screen and (min-width:768px) {
  #new-page-5 {
    .sqs-block-image .design-layout-stack .image-subtitle-wrapper {
      min-height:120px;
    }
  }
}

A massive thank you Ziggy. It worked beautifully, bravo !

3 minutes ago, JUSTIN1234 said:

A massive thank you Ziggy. It worked beautifully, bravo !

Fantastic to hear that, thanks for marking my post as the solution!

Hello - I tried this on a page of mine but it doesn't work - I substituted the page name but I guess I'm doing something wrong? Thanks in advance:

@media only screen and (min-width:768px) {
  #critical-industries-2023 {
    .sqs-block-image .design-layout-stack .image-subtitle-wrapper {
      min-height:160px;
    }
  }
}

@mdemartin If you can share your website URL and the section I can potentially help.

Targeting sections via the page URL slug is only applicable to some of the older tempaltes.

Thank you very much. Following is the URL:  https://www.span.org/critical-industries

You're using 7.1 so that isn't a way to target the page. You can use the page collection ID or section ID, but not the page URL.

#collection-640b1aec4478655213340f34
section[data-section-id="640b1aec4478655213340f36"]

https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

Oh my gosh - thank you very much Ziggy!

2 minutes ago, mdemartin said:

Oh my gosh - thank you very much Ziggy!

Happy to help!