Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Adaptive

Same height image stack blocks

Question

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

Share this post


Link to post

14 answers to this question

Recommended Posts

  • 0

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. 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

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

 


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Developer and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDate Picker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links.

Share this post


Link to post
  • 0
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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
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;
}
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
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. 

Screen Shot 2020-04-25 at 9.12.44 AM.png

Share this post


Link to post
  • 0
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;
}
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
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. 🙂 

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...