Jump to content

Poster Image - Words falling off poster image in responsive mode

Recommended Posts

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

Screen Shot 2021-07-26 at 12.39.46 PM.png

Edited by Layne_Alexandra
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

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

Screen Shot 2021-07-26 at 2.04.15 PM.png

Link to comment

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 by iamdavehart

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

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

Screen Shot 2021-07-26 at 12.39.46 PM.png

Do you need help on these? (Checked July 28)

Site URL – https://dandelion-crow-yf6g.squarespace.com/?password=reading

1. (Tablet – Homepage) Increase text width?

https://dandelion-crow-yf6g.squarespace.com/?password=reading

dandelion-crow-yf6g.squarespace.com-01-m

2. (Tablet – Homepage) Text overflows

https://dandelion-crow-yf6g.squarespace.com/?password=reading

dandelion-crow-yf6g.squarespace.com-02-m

3. (Tablet – Homepage) Text overlaps.

https://dandelion-crow-yf6g.squarespace.com/?password=reading

dandelion-crow-yf6g.squarespace.com-03-m

4. (Tablet – Homepage) Remove white space on the right of page?

https://dandelion-crow-yf6g.squarespace.com/?password=reading

dandelion-crow-yf6g.squarespace.com-04-m

5. (Tablet – Homepage) Image overlaps text.

https://dandelion-crow-yf6g.squarespace.com/?password=reading

dandelion-crow-yf6g.squarespace.com-05-m

6. (Tablet – Footer) Text break.

https://dandelion-crow-yf6g.squarespace.com/?password=reading

dandelion-crow-yf6g.squarespace.com-06-m

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.