Jump to content

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

Recommended Posts

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? 

image.thumb.png.fe9d0a734e1f7a2a5f08fdbfa4a6363e.png

 

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

image.thumb.png.340c5c9a966c47ef0301c7b4285f1081.png

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

image.thumb.png.fe9d0a734e1f7a2a5f08fdbfa4a6363e.png

 

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

image.thumb.png.340c5c9a966c47ef0301c7b4285f1081.png

I can not access the link

image.thumb.png.1a9e4e5372f75adf3f3c85410ff77530.png

Can you check it again?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

image.thumb.png.eef446d1698b753fbff688a2be875592.png

 

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 

image.thumb.png.5ae66b08eb1b863eac68b0bbaceba798.png

 

 

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

I want the block to look like this - 

image.thumb.png.eef446d1698b753fbff688a2be875592.png

 

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 

image.thumb.png.5ae66b08eb1b863eac68b0bbaceba798.png

 

 

It looks like you figured it out?

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
  • 8 months later...
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

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

Edited by Marya
Link to comment
  • 4 weeks later...

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

 

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.