Same height image stack blocks

Hey folks

I have many rows of image stack blocks here https://www.hosetechnologies.com/industrial-rubber-hose-products

What I am trying to do is have them so that each image stack block is the same height across the row

I have tried adding paragraph returns etc but it is just a bodge. 

I have found this post below but can't figure out how to target a row and then the individual columns within the row.

Any help on how to target a row and then make them all the same height would be greatfully appreciated.

Tom

You can set fixed height, or min-height for all blocks on that page.

For the community to help, we generally need a working link to the page on your site. 

On 1/18/2020 at 12:21 PM, tuanphan said:

You can set fixed height, or min-height for all blocks on that page.

For the community to help, we generally need a working link to the page on your site. 

Hi, the link is at the top of the post https://www.hosetechnologies.com/industrial-rubber-hose-products

In the circumstances @Adaptive you'll probably want to set the minimum height of the text. That way, the buttons are also aligned.

For example, this CSS would probably work at the maximum width, but you'll need to wrap a number of these in media queries to adjust the height at smaller widths:

#collection-5df0cfba33e7090f1f46f853 .image-subtitle-wrapper {
  min-height: 134px;
}

The reference to '#collection' is there to ensure that this only affects this one page. Anyone else using this would need to adjust the collection ID accordingly for their site. 

Here's a media query example for anyone who needs it. 

/* On screens that are less than 768px wide  */
@media screen and (max-width: 767px) {
  [the css goes here]
}

On 1/21/2020 at 1:49 PM, paul2009 said:

In the circumstances @Adaptive you'll probably want to set the minimum height of the text. That way, the buttons are also aligned.

For example, this CSS would probably work at the maximum width, but you'll need to wrap a number of these in media queries to adjust the height at smaller widths:

#collection-5df0cfba33e7090f1f46f853 .image-subtitle-wrapper {
  min-height: 134px;
}

The reference to '#collection' is there to ensure that this only affects this one page. Anyone else using this would need to adjust the collection ID accordingly for their site. 

Here's a media query example for anyone who needs it. 

/* On screens that are less than 768px wide  */
@media screen and (max-width: 767px) {
  [the css goes here]
}

 

Cheers Paul, I will give it a try when I get back onto that job.

Hi there, I think my question best fits in this thread. Hoping someone can help me ...

URL is beautybyjessika.com. No password.

In my #trending index, I'm using image stack blocks and I want the image card wrapper to be the same height regardless of the content. (It seems like the size of the wrapper depends on how long the title is.)

I've tried the codes in this thread as well as from other tutorials but nothing works—including @paul2009 display: flex; which I thought was brilliant. It's probably a user error on my part. 

Here's a snapshot of the boxes. Hoping I can find a solution soon! 

Thank you!

1 hour ago, jessikalyngarcia said:

Hi there, I think my question best fits in this thread. Hoping someone can help me ...

URL is beautybyjessika.com. No password.

In my #trending index, I'm using image stack blocks and I want the image card wrapper to be the same height regardless of the content. (It seems like the size of the wrapper depends on how long the title is.)

I've tried the codes in this thread as well as from other tutorials but nothing works—including @paul2009 display: flex; which I thought was brilliant. It's probably a user error on my part. 

Here's a snapshot of the boxes. Hoping I can find a solution soon! 

Thank you!

 

You can set min-height for title, add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
section#trending .image-card.sqs-dynamic-text-container {
    min-height: 140px;
}
}

10 hours ago, tuanphan said:

You can set min-height for title, add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
section#trending .image-card.sqs-dynamic-text-container {
    min-height: 140px;
}
}

 

URL: beautybyjessika.com. No Password.

Thank you, @tuanphan! It worked. Now I want to float the titles in the center of the box. (See attached example below for reference.)

Here's what I have so far:

section#trending .image-title.sqs-dynamic-text .center {
    position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

Thank you! 

13 hours ago, jessikalyngarcia said:

URL: beautybyjessika.com. No Password.

Thank you, @tuanphan! It worked. Now I want to float the titles in the center of the box. (See attached example below for reference.)

Here's what I have so far:

section#trending .image-title.sqs-dynamic-text .center {
    position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

Thank you! 

 

you mean align left title or?

10 hours ago, tuanphan said:

you mean align left title or?

No, not align the title left. I want to move these titles that aren't as long as the title in the first box to the center of the box. 

2 hours ago, jessikalyngarcia said:

No, not align the title left. I want to move these titles that aren't as long as the title in the first box to the center of the box. 

 

@media screen and (min-width:641px) {
section#trending .image-card.sqs-dynamic-text-container {
    min-height: 140px;
}
section#trending .image-card.sqs-dynamic-text-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
}

2 hours ago, tuanphan said:

section#trending .image-card.sqs-dynamic-text-container { height: 100%; display: flex; justify-content: center; align-items: center; } }

YAY THANK YOU! IT WORKS. 🙂 

Thought I would jump on it as I am having the same problem.

I am trying to have each image stack block is the same height across the row regardless of the window size.

I tried this code but nothing is changing: 

.sqs-block-image .design-layout-inline .intrinsic {
  display: flex;
  flex-direction: column;
 }

.sqs-block-image .image-block-outer-wrapper .image-block-wrapper  { flex: 1;
}

Any advice would be very appreciated.

19 hours ago, Lilly10120 said:

 

Can you share link to your site?

@tuanphan Sorry completely forgot.

The website is www.smalleyesbigcity.com

Website: JessikaGarcia.com | Password: PassionProject2020

Hello again! The code you gave me was working, but ever since I moved it to another index, it started pushing the title to fill the space of the box. At first I thought it was because I had too many boxes in a row, but it still does it with one or two boxes. Here's the code @tuanphan gave me earlier this month:

@media screen and (min-width:641px) {
section#must-reads .image-card.sqs-dynamic-text-container {
  min-height: 110px;
  }
}
section#must-reads .image-card.sqs-dynamic-text-container {
    height: 100%;
   display: flex;
    justify-content: center;
    align-items: center;
}

On 5/28/2020 at 3:51 AM, jessikalyngarcia said:

Website: JessikaGarcia.com | Password: PassionProject2020

Hello again! The code you gave me was working, but ever since I moved it to another index, it started pushing the title to fill the space of the box. At first I thought it was because I had too many boxes in a row, but it still does it with one or two boxes. Here's the code @tuanphan gave me earlier this month:

@media screen and (min-width:641px) {
section#must-reads .image-card.sqs-dynamic-text-container {
  min-height: 110px;
  }
}
section#must-reads .image-card.sqs-dynamic-text-container {
    height: 100%;
   display: flex;
    justify-content: center;
    align-items: center;
}

Which section? Can you take a screenshot?

hi everyone!

@tuanphan
I also am having the same issue but getting confused how to apply the code: https://thewritique.com/home #who-we-help

Any help would be appreciated! TIA

On 5/31/2020 at 1:58 AM, tuanphan said:

Which section? Can you take a screenshot?

@tuanphan Hi! It's every section with the stacked image blocks. Thank you!

URL: jessikagarcia.com | NO PASSWORD

On 6/5/2020 at 11:50 PM, jaksdigital said:

hi everyone!

@tuanphan
I also am having the same issue but getting confused how to apply the code: https://thewritique.com/home #who-we-hel

On 7/6/2020 at 12:56 PM, jessikalyngarcia said:

@tuanphan Hi! It's every section with the stacked image blocks. Thank you!

URL: jessikagarcia.com | NO PASSWORD

Any help would be appreciated! TIA

I didn't get the notification. Have you solved it yet?

Hi @tuanphan,

I would really appreciate your help as well. I don't know how to call the appropriate elements on my page to insert the custom css.

This is the website/page : www.altrottasamphora.com

Thanks in advance!

14 hours ago, AltrottasAmphora said:

Hi @tuanphan,

I would really appreciate your help as well. I don't know how to call the appropriate elements on my page to insert the custom css.

This is the website/page : www.altrottasamphora.com

Thanks in advance!

 

 

Can you share link to page in screenshot?

I seem to be having issue aligning two sections. If someone could please guide me. Screenshot below for reference.

Website - https://bassoon-tomato-7pzf.squarespace.com

Password: hello21

On 11/17/2021 at 12:02 PM, Tami21 said:

I seem to be having issue aligning two sections. If someone could please guide me. Screenshot below for reference.

Website - https://bassoon-tomato-7pzf.squarespace.com

Password: hello21

 

You want to make image-text background same height??

15 hours ago, tuanphan said:

You want to make image-text background same height??

So I'm in the same situation. I have a sqs row with a span-8 of text and a span-4 of image. I want them to be equal height, and the image to fill the entire container in the span-4 depending on how the text scales in the span-8.

https://raccoon-apricot-g862.squarespace.com/config/pages

password: "new-password"

This is what it looks like now:

This is what I want it to look like:

Anyone have any leads on how I can make this happen? I've managed to get the two columns to be equal, but the image itself is stretching rather than zooming in to fill the entire span-4 block.