Jump to content

Repositioning text on image poster?

Recommended Posts

I am using image posters for the website I am designing, but the text and button are too high up for my liking. I want to position the text down the image more. How do I do this?? I've attached a screenshot of what it currently looks like. Please help!

Screen Shot 2019-10-29 at 4.42.30 AM.png

Link to comment
  • Replies 15
  • Views 4.9k
  • Created
  • Last Reply
1 hour ago, colin.irwin said:

Can you post a link to your site?

It's private...I am building it for someone else and do not have their permission to post the link / make the site live just yet. Hence why I provided the screenshot. 

Link to comment
22 minutes ago, colin.irwin said:

Unfortunately, a screenshot doesn't allow us to see the underlying code. 

I'm using the Brine template if that helps any? I was hoping there was just a setting or something that I could just adjust the placement. Unfortunately, I could get into legal trouble for providing the link to the live website right now because I am under contract.  

Link to comment

This is the best I can do without having access to your site. 

It adds 35px of padding to the top of every poster image subtitle (the body text) and this will shift both the text and the button down. You can tweak the 35px value to get the desired spacing. 

However, this rule will apply to every poster image on the site. Without access to the site I can't narrow it down to particular instances of poster blocks. 

.sqs-block-image .design-layout-poster .image-subtitle-wrapper {
    padding-top: 35px;
}

Add the code to your custom css area

Link to comment
34 minutes ago, colin.irwin said:

This is the best I can do without having access to your site. 

It adds 35px of padding to the top of every poster image subtitle (the body text) and this will shift both the text and the button down. You can tweak the 35px value to get the desired spacing. 

However, this rule will apply to every poster image on the site. Without access to the site I can't narrow it down to particular instances of poster blocks. 


.sqs-block-image .design-layout-poster .image-subtitle-wrapper {
    padding-top: 35px;
}

Add the code to your custom css area

Thank you so much!!!

Link to comment
  • 9 months later...
On 8/14/2020 at 4:42 AM, StevansAZ said:

Hi @colin.irwin any chance you would know this code for 7.1?

I think poster block on SS 7.0 & 7.1 have same code. If you still doesn't solve, can you share link to page where you use poster? We can check easier.

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
  • 4 months later...
1 hour ago, MartinMurray said:

Hi All

I'm seeing the same problem - currently doing a job with Bentley - a small lead gen landing page, to run for 2 months - I'm using Brine 7.1 and adding the code] - looks fine when editing but the live site, its not working
 

https://www.autotrader-promotion.co.uk/bentley


.sqs-block-image .design-layout-poster .image-subtitle-wrapper {
    padding-top: 35px;
}

Screen Shot 2021-01-08 at 01.47.44.png

I don't see text here?

image.thumb.png.714ac50e5fe62a06f4a3cd6639dfb05d.png

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
10 hours ago, MartinMurray said:

Sorry Tuan, I had to change them for images, had a meeting with Client and I didn't want them to see the rich text/default text over the images.... i've replaced them back to as they where 🙂  

https://www.autotrader-promotion.co.uk/bentley

 

Use this code

div#block-yui_3_17_2_1_1610071473149_26831 .design-layout-poster .image-title-wrapper {
    padding-bottom: 150px;
}

 

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

Archived

This topic is now archived and is closed to further replies.

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