Mentor: How to bottom-align the banner text

Hello,

I am using the Mentor template and want to bottom-align the banner text so it doesn't interfere with e.g. people's faces on the images. On the attached image you can see what I mean, it would look better if the text was positioned on the bottom left.

By putting spacers on the left or right, I can change the text from left- or right-aligned, but vertically I can't influence the position.

The design of the banner text with the white text lying on the semi-transperent grey background is defined by this Markdown (I didn't write it):

The AllBright Foundation works to promote more women and diversity in executive business positions.(see attached image)

Can I add something here that makes the banner text bottom-aligned? Or do I have to go via the CSS?

Thanks for your help!

Lucie

Try or if you can share site url, i think i'll give better css

<span style="background-color: rgba(0, 0, 0, 0.5);margin-top:100px;">

Hey @lucieallbright!

Try this in your Design > Custom CSS -- after making one change as noted below:

#home-top .sqs-layout:not(.sqs-editing) .markdown-block {
   top: 210px;
}
@media screen and (max-width: 1280px) {
 #home-top .sqs-layout:not(.sqs-editing) .markdown-block {
   top: 180px;
 }
}
@media screen and (max-width: 960px){
 #home-top .sqs-layout:not(.sqs-editing) .markdown-block {
   top: 120px;
 }
}
@media screen and (max-width: 640px){
 #home-top .sqs-layout:not(.sqs-editing) .markdown-block {
   top: 60px;
 }
}

The "home-top" must be the name of your top section, the one with the image of the people and the quote you want bottom-aligned. If you're not sure what it is, hover over that part of the page in the Squarespace editor, and select "Settings" from the top-left pop-up menu to see the Page Settings. Look on the Basic tab for "URL Slug". The section name will be whatever is in that field, excluding the initial "/". (For my example code above, the URL Slug would show "/home-top", which you enter as "#home-top" in the CSS.)

If the above code doesn't get the quote right to the bottom, you probably have some spacers below the quote that you could remove.

One final thing to note: Moving things around with CSS sometimes causes issues when editing the page. I've included a "...:not(.sqs-editing)" clause in the CSS to prevent the quote from being moved when in the editor, so you'll see the quote jump back up to its "real" location when you do that... don't be alarmed when you see it happen. :)

Hope this helps!

James

Hi James,

this works perfectly, have a look!I put a spacer under the Markdown so the text sits a bit above the bottom line. So nice :)

Thank you very much for your help,

Lucie

Hello @ArchMonkey! Trying to do the same here (also in Mentor) and it is not working for me. I double checked and there are no spacers within the image. I think the only difference between lucieallbright and mine is that my banner image is the media image within the page settings. Any ideas on how I could remove the padding under the text within the banner image?

Would appreciate any support! Thank you so much!

18 hours ago, koala said:

Hello @ArchMonkey! Trying to do the same here (also in Mentor) and it is not working for me. I double checked and there are no spacers within the image. I think the only difference between lucieallbright and mine is that my banner image is the media image within the page settings. Any ideas on how I could remove the padding under the text within the banner image?

 

Would appreciate any support! Thank you so much!

Can you share site url? We can help easier

On 10/22/2020 at 1:57 AM, koala said:

@tuanphan Yes, thank you! www.project351.org/new-home-index. I want to get rid of the space below the "Learn More" button. What do you think?

Add to Home > Design > Custom CSS

section#home-top-1 .Index-page-content {
    padding-bottom: 0;
}

On 10/23/2020 at 6:01 AM, tuanphan said:

Add to Home > Design > Custom CSS

section#home-top-1 .Index-page-content {
    padding-bottom: 0;
}

 

Thank you!!! This worked perfectly.

I believe I am looking for a similar solution. Would some be able to help me out?
Website link: https://derekj.squarespace.com/config/

On 4/23/2021 at 7:34 AM, derscojoh said:

I believe I am looking for a similar solution. Would some be able to help me out?
Website link: https://derekj.squarespace.com/config/

Where is banner text?