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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.