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 Sunday at 09:20 PM Share Posted Sunday at 09:20 PM 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment