Stop text overflow on Poster Image Block responsiveness

Site URL: https://azalea-wedge-79l6.squarespace.com/success-stories/native-shoes

I've been trying to find the correct fix, but I'm not a CSS whisperer. Maybe one of you can help?

When this page is reduced to mobile or table, the text overflow in the Poster Image Block isn't staying within the constraints of the block. How do I fix it so the entire Image Block reduces in size including the text?

https://azalea-wedge-79l6.squarespace.com/success-stories/native-shoes
PW: jldnetrush

Add to Design > Custom CSS > then save & reload the site

/* Poster overflow */
@media screen and (max-width:991px) {
div#block-1ad8e95619d3440bbe15 .content-fill {
    padding-bottom: 50% !important;
}
}
@media screen and (max-width:767px) {
div#block-1ad8e95619d3440bbe15 .content-fill {
    padding-bottom: 100% !important;
}
}

1 hour ago, tuanphan said:

Add to Design > Custom CSS > then save & reload the site

/* Poster overflow */
@media screen and (max-width:991px) {
div#block-1ad8e95619d3440bbe15 .content-fill {
    padding-bottom: 50% !important;
}
}
@media screen and (max-width:767px) {
div#block-1ad8e95619d3440bbe15 .content-fill {
    padding-bottom: 100% !important;
}
}

 

What if I want to make this general for every time I'm using a Poster Image block? This same design is in all of the blog posts for that category.

15 hours ago, JoshuaLipka said:

What if I want to make this general for every time I'm using a Poster Image block? This same design is in all of the blog posts for that category.

Each poster will need a different code. div#block....15 is block id. Use this tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

HI I have a similar problem, I have tried pasting the CSS code and amending the block ID, but the text is still overflowing if i resize the page.

Page: https://bumblebee-dahlia-r4jw.squarespace.com/new-page-4

See first flipping image. If i resize the text is still overflowing.

Thanks Fi

On 1/17/2024 at 5:58 PM, FiSexton said:

HI I have a similar problem, I have tried pasting the CSS code and amending the block ID, but the text is still overflowing if i resize the page.

Page: https://bumblebee-dahlia-r4jw.squarespace.com/new-page-4

See first flipping image. If i resize the text is still overflowing.

Thanks Fi

Your site needs a different ID. Use this code

div#page-659d52c1f7e02c6cf594590e .content-fill {
    padding-bottom: 175% !important;
}

Hi that didn't seem to work. I have removed the coding fully for the time being. 

Any further ideas that may help me?

Fi

On 1/29/2024 at 7:02 PM, FiSexton said:

Hi that didn't seem to work. I have removed the coding fully for the time being. 

Any further ideas that may help me?

 

Fi

Just tested & I see it still works, maybe you added code to wrong position. Can you send all code after you added the code? & take a screenshot of problem then?