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

Bedford/Bryant template - banner button alignment (horizontal and vertical)

Question

Hi,

The client I'm building the site for inexplicably wants the call to action button on the main/index page's banner to be not as noticeable. They would like it as close to the lower right corner of the banner image as possible. I can't figure out how to position the button without also affecting the banner text (page description), which they want to remain centered, and the responsiveness of the banner image poses a problem as well. I tried customizing the .desc-wrapper element in CSS but haven't been able to make it look how they want.Here's the site:https://hyperboloid-guava-pw2m.squarespace.com

Thank you!

Edited by alisonb

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

@tuanphan Thank you - this does align it to the right within the confines of this particular "wrapper" (for lack of a better term). How would I adjust the code/characteristics so that the padding between the button and the right and bottom edges of the banner image is almost zero? That way it's sitting as close to the bottom-right edge of the banner image as possible. Thanks!

Edited by alisonb
Initial Revision

Share this post


Link to post
  • 0

@alisonb I thought you knew a little CSS so I just sent the class of the button. :bb:In this case you need to adjust the width of both "The right ..." and the button to 100% (currently 90%), ( .desc-wrapper)Then adjust the margin bottom and margin right of the button to 0 (.desc-wrapper p:last-child)Since the width of the entire block is 100%, you may need to adjust the margin left/right or padding left/right of "the right co .." (.desc-wrapper p:first-child)


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL

 

Share this post


Link to post
  • 0

I was able to modify this code (taken from this original Answers post: https://answers.squarespace.com/questions/203098/change-banner-text-positioning-on-bryant.html) to have the button be aligned on the bottom right. It unfortunately also made the banner text be right-aligned as well, but this should do for now until I can figure out how to align the text separately from the button. Hopefully, they'll decide that centering the text isn't as necessary as their preferred button positioning.


 .view-list main #content div.index-section:nth-child(1) .banner-thumbnail-wrapper
{
min-height: 0;
padding: 325px 0 0 0;
}
.view-list main #content div.index-section:nth-child(1) .banner-thumbnail-wrapper .desc-wrapper
{
padding: 0 0;
text-align: right;
margin: 0 40px;
max-width: 90%;
}



Edited by alisonb
Initial Revision

Share this post


Link to post
  • 1

@alisonb


div#communities-all .desc-wrapper {
   max-width: 100% !important;
   margin: 0 !important;
}
div#communities-all .desc-wrapper p:first-child {
   margin-right: 10%;
}
div#communities-all .desc-wrapper p:last-child {
   margin-bottom: 0;
}
.desc-wrapper p:last-child>a {
   margin-bottom: 0;
}




COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL

 

Share this post


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