Jump to content

Same height image stack blocks

Go to solution Solved by paul2009,

Recommended Posts

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

Screenshot 2020-01-16 at 16.04.52.png

Link to comment
  • Solution

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

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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

Link to comment
  • 3 months later...

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!

 

Screen Shot 2020-04-23 at 8.25.30 PM.png

Link to comment
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;
}
}

 

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

EXAMPLE.png

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

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

 

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
  • 2 weeks later...

Hello guys

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.

 

 

Edited by Lilly10120
Link to comment
  • 3 weeks later...

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

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

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...
  • 2 weeks later...
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?

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
  • 3 weeks later...

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!

Screen Shot 2020-08-06 at 4.00.07 PM.png

Screen Shot 2020-08-06 at 3.59.58 PM.png

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

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

 

image.thumb.png.533de11b6e5cf089c148baaa5109e052.png

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

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

image.thumb.png.0b96e2c6ddc55131c7b7f4c896171a35.png

This is what I want it to look like:

image.thumb.png.a0b5a8e6bda82302634a6b37bf9ca882.png

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.

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.