nickdjeremiah Posted April 26, 2020 Share Posted April 26, 2020 (edited) [update - I have managed to get it working (hooray) but for some reason, the thumbnail gets hidden... I have no idea why.] I'm trying to align all the "Read More" buttons/links in a summary bloack to sit at the bottom of the block. I've managed to use flex-box to make the summary blocks all the same size (why this isn't a feature by default I have no idea), and I'm trying to do something similar for the read more buttons but I can't get it to work. I think the below code is somewhat correct, but I can't figure out how to get it working. display: flex; flex: 1; flex-direction: column; justify-content: space-between; @beatrizc, I was following one of your blog posts about it, but I can't seem to get it working, perhaps you're able to help? Edited April 26, 2020 by nickdjeremiah JayVanDyke 1 Link to comment
tuanphan Posted April 26, 2020 Share Posted April 26, 2020 Can you share link to page where you use summary block? 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
JayVanDyke Posted July 28, 2020 Share Posted July 28, 2020 Did you get anywhere with this? I'm looking for the same fix. ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs Link to comment
tuanphan Posted January 4, 2022 Share Posted January 4, 2022 For future comments, this can be solved with some CSS code. If you need to fix, please share link to page where you use summary block, we can check & help 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
NadineS Posted September 1, 2023 Share Posted September 1, 2023 Same question! https://antongill.squarespace.com/ pw: vopro /* BLOG READ MORE BUTTON */ a.blog-more-link { font-size: 0 !important; text-decoration: none !important; align-self: flex-end; } a.blog-more-link:after { content: "Read Now →"; font-size: 1rem !important; background-color: #00FFFF !important; padding: 18px 8px 18px 18px; border-radius: 25px; border: 1px solid #000; } a.blog-more-link:hover:after, a.blog-more-link:active:after { background-color: #000 !important; /* Button turns black */ color: #fff !important; /* Text turns white */ border-color: #fff !important; } Link to comment
tuanphan Posted September 4, 2023 Share Posted September 4, 2023 On 9/2/2023 at 1:17 AM, NadineS said: Same question! https://antongill.squarespace.com/ pw: vopro /* BLOG READ MORE BUTTON */ a.blog-more-link { font-size: 0 !important; text-decoration: none !important; align-self: flex-end; } a.blog-more-link:after { content: "Read Now →"; font-size: 1rem !important; background-color: #00FFFF !important; padding: 18px 8px 18px 18px; border-radius: 25px; border: 1px solid #000; } a.blog-more-link:hover:after, a.blog-more-link:active:after { background-color: #000 !important; /* Button turns black */ color: #fff !important; /* Text turns white */ border-color: #fff !important; } In your blog page, you need to make all same height by set height, or make all limit to 2 lines With same height, you can use this CSS code @media screen and (min-width:992px) { h1.blog-title { min-height: 130px; } } NadineS 1 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
NadineS Posted September 5, 2023 Share Posted September 5, 2023 Thank you so much @tuanphan!!! tuanphan 1 Link to comment
writewithbee Posted March 17 Share Posted March 17 I'm totally stuck on this after going round in circles for a couple of hours trying to get the flex box thing to work. I need the 'Read More' links aligned to the bottom of each container so they look consistent across the summary items. https://triceratops-tuba-r9bj.squarespace.com/home-1 pw: sunnyside This is what I am using at the moment after watching some tutorials: .summary-item { border: 0px solid purple; display: flex; flex-direction: column; } .summary-content { border-top: 2px solid darkred; padding: 0px 0px 0px 0px; display: flex; flex-direction: column; flex: 1; } .summary-read-more-link { font-size:0!important; margin-top: auto !important; } .summary-read-more-link:after { font-size:1rem!important; border:1px solid darkred; content: "Read More →"; background: #; padding: 5px 10px 5px 8px; } .summary-read-more-link:hover:after{ background:darkred !important; color:#fff!important } Any help understanding where I am going wrong would be very helpful! Link to comment
tuanphan Posted March 20 Share Posted March 20 On 3/18/2024 at 4:20 AM, writewithbee said: I'm totally stuck on this after going round in circles for a couple of hours trying to get the flex box thing to work. I need the 'Read More' links aligned to the bottom of each container so they look consistent across the summary items. https://triceratops-tuba-r9bj.squarespace.com/home-1 pw: sunnyside This is what I am using at the moment after watching some tutorials: .summary-item { border: 0px solid purple; display: flex; flex-direction: column; } .summary-content { border-top: 2px solid darkred; padding: 0px 0px 0px 0px; display: flex; flex-direction: column; flex: 1; } .summary-read-more-link { font-size:0!important; margin-top: auto !important; } .summary-read-more-link:after { font-size:1rem!important; border:1px solid darkred; content: "Read More →"; background: #; padding: 5px 10px 5px 8px; } .summary-read-more-link:hover:after{ background:darkred !important; color:#fff!important } Any help understanding where I am going wrong would be very helpful! Can you check url again? 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
DesignbyCaroline Posted March 27 Share Posted March 27 (edited) Hello @tuanphan Can you help me with the same issue? The buttons should all be on the same line. Thanks https://library-of-reuse.ch/books This is the css I already use: .blog-basic-grid .blog-basic-grid--container .blog-more-link { font-size:0!important} .blog-basic-grid .blog-basic-grid--container .blog-more-link:after{ font-size:1rem!important; font-weight:600!important; content: "READ MORE"; background: #000000 !important; color: #ffffff !important; padding:25px 0px 25px 25px; margin-top:10px; } Edited March 27 by DesignbyCaroline Link to comment
DesignbyCaroline Posted March 28 Share Posted March 28 (edited) 22 hours ago, DesignbyCaroline said: Hello @tuanphan Can you help me with the same issue? The buttons should all be on the same line. Thanks https://library-of-reuse.ch/books This is the css I already use: .blog-basic-grid .blog-basic-grid--container .blog-more-link { font-size:0!important} .blog-basic-grid .blog-basic-grid--container .blog-more-link:after{ font-size:1rem!important; font-weight:600!important; content: "READ MORE"; background: #000000 !important; color: #ffffff !important; padding:25px 0px 25px 25px; margin-top:10px; } I think I managed myself - thanks to the blog entry from @beatrizc This is my full css now and it is working fine: .blog-basic-grid .blog-basic-grid--container .blog-more-link { font-size:0!important} .blog-basic-grid .blog-basic-grid--container .blog-more-link:after{ font-size:1rem!important; font-weight:600!important; content: "READ MORE"; background: #000000 !important; color: #ffffff !important; padding:25px 0px 25px 25px; margin-top:20px; } //To bottom-align the buttons .blog-basic-grid .blog-basic-grid--text { display: flex; flex: 1; flex-direction: column; } .blog-basic-grid .blog-excerpt { margin-bottom: auto; } You find the full blog post about it here: https://www.beatrizcaraballo.com/blog/read-more-links-buttons-bottom-blog-squarespace-7-1 Edited March 28 by DesignbyCaroline tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment