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

4 answers to this question

Recommended Posts

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

 


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm currently booked until the middle of June 2020.
Prebuilt Squarespace Extensions for Squarespace 7.0 and 7.1: Enquiry Form ExtensionDate Picker Extension and Age Verification Extension 
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Wishlist extension is now Squarespace 7.1 compatible.

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

Create an account or sign in to comment

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


×
×
  • Create New...