alisonb1570048706 Posted July 2, 2019 Share Posted July 2, 2019 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! Link to comment
tuanphan Posted July 2, 2019 Share Posted July 2, 2019 @alisonb That button has class: .desc-wrapper p:last-child or .desc-wrapper p:last-child a .desc-wrapper p:last-child { text-align: right; } 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
alisonb1570048706 Posted July 2, 2019 Author Share Posted July 2, 2019 @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! Link to comment
tuanphan Posted July 2, 2019 Share Posted July 2, 2019 @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) 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
alisonb1570048706 Posted July 2, 2019 Author Share Posted July 2, 2019 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%; } Link to comment
tuanphan Posted July 2, 2019 Share Posted July 2, 2019 @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; } 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
alisonb1570048706 Posted July 2, 2019 Author Share Posted July 2, 2019 @tuanphan thank you! this is perfect. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.