Same height image stack blocks

Hi @tuanphan,

Yes, I would like both them the same height. Could you please suggest how to go about this?

Thank you!

On 11/19/2021 at 3:45 AM, Amadaeus said:

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.

You can use some code like this

/* image height from screen size 992px to 1500px */
@media screen and (min-width:992px) and (max-width:1500px) {
div#block-yui_3_17_2_1_1637268067116_2555 .has-aspect-ratio {
    height: 300px !important;
}
}

Repeat this code with specific screen sizes to adjust image height

On 11/18/2021 at 10:51 AM, tuanphan said:

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

Yes, any suggestions on what code I can plug-in for this? Thank you!

On 11/18/2021 at 12:21 PM, tuanphan said:

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

Try adding to Design > Custom CSS

@media screen and (min-width:992px) {
[data-section-id="6191f511caf7c170226fef67"] {
    min-height: unset !important;
    height: 90vh !important;
}
[data-section-id="619211988190350ecc1b9aa0"] {
    height: 90vh !important;
    min-height: unset !important;
}
}

On 11/21/2021 at 7:56 AM, tuanphan said:

You can use some code like this

/* image height from screen size 992px to 1500px */
@media screen and (min-width:992px) and (max-width:1500px) {
div#block-yui_3_17_2_1_1637268067116_2555 .has-aspect-ratio {
    height: 300px !important;
}
}

Repeat this code with specific screen sizes to adjust image height

Thank you so much! This worked perfectly. Just wanted to see if there's a way to reduce the height on mobile version separately? attaching image for reference (both mobile and desktop versions). 

On 11/27/2021 at 9:24 PM, Tami21 said:

Thank you so much! This worked perfectly. Just wanted to see if there's a way to reduce the height on mobile version separately? attaching image for reference (both mobile and desktop versions). 

 

You mean reduce space on top/bottom of text on mobile?

7 hours ago, tuanphan said:

You mean reduce space on top/bottom of text on mobile?

Yes, exactly!

23 hours ago, Tami21 said:

Yes, exactly!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="6191f511caf7c170226fef67"] {
    min-height: unset !important;
}
[data-section-id="6191f511caf7c170226fef67"] .content-wrapper {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
}