Poster Image - Words falling off poster image in responsive mode

Layne_Alexandra · July 26, 2021

Site URL: https://dandelion-crow-yf6g.squarespace.com/

Hello there!

I am using a poster image to serve as a background for text. It looks great, however, when I go into responsive mode, the words fall off of the image. You can see in the screenshot attached. How to I keep the words on the poster in responsive mode.

Thank you for your help!

Site URL:

https://dandelion-crow-yf6g.squarespace.com/

PW: reading

Edited July 26, 2021 by Layne_Alexandra

iamdavehart · July 26, 2021

I guess the real question is, if there's not enough space for all the text what do you actually want it to do? you'd have to decide whether you wanted it to clip, or to resize etc.

You can sort this out using CSS, but exactly how you do that will depend on what you want to do with it if its too big. Here's an example which will clip the text for you and keep the heading at the top

/* the design layout poster sets the text width at 70% by default, 
   so you could override that to make more space */
.sqs-block-image .design-layout-poster .image-card {
    width: 100% !important;
}

/* the text container within it can be set to hide its content 
   if it overflows, but you must set a height */
.sqs-block-image .design-layout-poster .image-card {
    overflow:hidden;
	height:100%;
}

this will make the change for all poster types on that page (assuming you add the css in a code block for that page only).

you could put other css in here if you wanted to make the text smaller for mobile etc...

Layne_Alexandra · July 26, 2021

Hi @iamdavehart,

Thank you for making the time to help me! Unfortunately, those solutions didn't work out as hoped.

I am trying to make it so that no matter the width of the screen, the images appear as displayed in the attached image. In other words, I want all of the text to remain constrained on the post image rather than overlapping off. I am not sure if this is possible, but wanted to give it a shot.

Otherwise I could use the image stack option. Is there a way for me to change the card background on image stack when it is in 7.1?

Thanks again!

Best,
Layne

iamdavehart · July 26, 2021

your site is behind a password so we can't see exactly what you mean, but essentially you need the same sort of solution I posted before, but put a media query in the stylesheet to make sure it only happens at certain widths. so you could try this inside your code block

<style>

@media screen and (max-width: 1100px) {  
  
.sqs-block-image .design-layout-poster .image-card h3 {
    font-size:95%;
}

.sqs-block-image .design-layout-poster .image-card p  {
    font-size:80%;
}
  
</style>

you might need to play with the values to make it work exactly as you want, but I've tried it on an example and it works for me.

(this assumes you've used a heading style 3 for "SERVICE ONE" etc. but just change the h3 in the stylesheet if you've used a different level)

Edited July 26, 2021 by iamdavehart

tuanphan · August 2, 2021

On 7/27/2021 at 1:41 AM, Layne_Alexandra said:

Site URL: https://dandelion-crow-yf6g.squarespace.com/

Hello there!

I am using a poster image to serve as a background for text. It looks great, however, when I go into responsive mode, the words fall off of the image. You can see in the screenshot attached. How to I keep the words on the poster in responsive mode.

Thank you for your help!

Site URL:

https://dandelion-crow-yf6g.squarespace.com/

PW: reading