How can I get Image card text to work with a scroll bar (overflow) and sit flush with the image

Site URL: https://www.shiftmovement.org.uk/home%C2%A0

Hi, 

I am trying to get my image card to allow scrolling on overflow.

1.I am struggling to get the text box to stay the same size as the image. Whenever the screensize changes whatever px I set it too doesn't work. I want it to be responsive like an image card is normally.

The code I have used has got the text to scroll but has cut it off weirdly at the top. Something isn't quite right! 

Can anyone help with what i'm missing? 

I also want the image card to be full width for it to visually look like this 

1 hour ago, MillyBanks said:

Site URL: https://www.shiftmovement.org.uk/home%C2%A0

Hi, 

I am trying to get my image card to allow scrolling on overflow.

1.I am struggling to get the text box to stay the same size as the image. Whenever the screensize changes whatever px I set it too doesn't work. I want it to be responsive like an image card is normally.

The code I have used has got the text to scroll but has cut it off weirdly at the top. Something isn't quite right! 

Can anyone help with what i'm missing? 

 

I also want the image card to be full width for it to visually look like this 

I can not access the link

Can you check it again?

36 minutes ago, bangank36 said:

I can not access the link

Can you check it again?

It should be working - website is live behind a coverpage. 🙂

https://www.shiftmovement.org.uk/home

You can try

#block-yui_3_17_2_1_1652803380653_2482 .image-card {
  /* padding-top: 0; */
  
}
#block-yui_3_17_2_1_1652803380653_2482 .image-card-wrapper {
  align-items: flex-start;
}

Use the padding-top value if you want to decrease the top space 

15 minutes ago, bangank36 said:

You can try

#block-yui_3_17_2_1_1652803380653_2482 .image-card {
  /* padding-top: 0; */
  
}
#block-yui_3_17_2_1_1652803380653_2482 .image-card-wrapper {
  align-items: flex-start;
}

Use the padding-top value if you want to decrease the top space 

Thanks @bangank36

I have tweaked a few things and it is slightly better but doesn't seem to be working quite right. I am not sure the flex is working as when you change window size even a tiny bit the image is offset to the image again?

4 hours ago, MillyBanks said:

Thanks @bangank36

I have tweaked a few things and it is slightly better but doesn't seem to be working quite right. I am not sure the flex is working as when you change window size even a tiny bit the image is offset to the image again?

What is the result you want to achieve? Understanding your desire output is the must to get the right solution

9 hours ago, bangank36 said:

What is the result you want to achieve? Understanding your desire output is the must to get the right solution

I want the block to look like this - 

The text I need here exceeds the size of the image card. So would like it to scroll (which is working)

I would like to have the green half to be the same height as the image and remain the same height on tablet and different desktop window sizes. 

currently it does this 

On 5/18/2022 at 9:29 PM, MillyBanks said:

I want the block to look like this - 

 

The text I need here exceeds the size of the image card. So would like it to scroll (which is working)

I would like to have the green half to be the same height as the image and remain the same height on tablet and different desktop window sizes. 

currently it does this 

 

 

It looks like you figured it out?

On 5/20/2022 at 5:10 PM, tuanphan said:

It looks like you figured it out?

Hi @tuanphan no unfortunately not. The image still sits strangely within the border etc. 

Hi @tuanphan @MillyBanks, 

Did you find a solution for this? I'm also in need of a solution for this. 

Thanks!

On 2/7/2023 at 1:17 AM, Marya said:

Hi @tuanphan @MillyBanks, 

Did you find a solution for this? I'm also in need of a solution for this. 

Thanks!

Can you share link to page where you have problem? We can check it again

On 2/10/2023 at 4:02 AM, tuanphan said:

Can you share link to page where you have problem? We can check it again

@tuanphan 

Page: plum-buttercup-wrdb.squarespace.com/blog/review-template

Password: review

I'm trying to achieve the same functionality where additional text that goes beyond the image height for an inline image card is hidden by a scrollbar. 

Thanks!

Hi Community! Tuan helped me figure this out one-on-one, but I wanted to share his code just in case it may help anyone else out. 

I've added notes so you can configure it for your own site 🌞

@media screen and (min-width: 768px) {
    div#block-code123  figcaption {
        max-height: 404px; //increase or decrease this accordingly
        overflow-y: scroll;
        pointer-events: initial !important;
        display: block !important;
    }
}//laptop view
@media screen and (min-width:768px) and (max-width:1024px) {
div#block-code123  figcaption {
        max-height: 304px !important; //increase or decrease this accordingly
    }
}//tablet view