Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Mentor: How to bottom-align the banner text


lucieallbright

Question

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 alt textalt text

markdown.png.53f4b832642ca93eb69d0cfedd6dea52.png

text-on-faces.png.2df3d6ddabcaebbdc9c246ab92102c62.png

Edited by lucieallbright
Initial Revision
Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

7 answers to this question

Recommended Posts

  • 1

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

I'm a long-time developer who currently owns and runs SavvyStoreSolutions.com where I help people with their Shopify, Squarespace, and other eCommerce sites.

Link to post
  • 0

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!

Screen Shot 2020-10-20 at 10.29.01 AM.png

Screen Shot 2020-10-20 at 10.29.26 AM.png

Link to post
  • 0
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 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.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...