KatieQ Posted September 29, 2022 Share Posted September 29, 2022 (edited) Site URL: https://designbycaitie.ca/blog Hey there, I found some code by Inside the Square to create a two-column layout for blog collection pages. It works great, but now my excerpts look wayyy too long, and the category tags take up too much space. Can someone provide code to 1) REDUCE the excerpt to three lines ending in an ellipses, and 2) REMOVE the category tags, both changes on mobile view only? Thank you! Edited September 29, 2022 by KatieQ Updated photo. Link to comment
Solution Ziggy Posted September 29, 2022 Solution Share Posted September 29, 2022 Try this as a solution, add to your Custom CSS: @media only screen and (max-width:640px) { .blog-basic-grid .blog-excerpt p { white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .blog-basic-grid .blog-meta-section { display:none; } } You can adjust how many lines the excerpt has by changing the 2 in this line -webkit-line-clamp: 2; You may want to adjust the 640px depending on the breakpoint to match the one you used for the two column layout. Please upvote if this has helped! mbockmaster 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
KatieQ Posted September 29, 2022 Author Share Posted September 29, 2022 Worked like a charm! Thanks so much!! Link to comment
KatieQ Posted October 2, 2022 Author Share Posted October 2, 2022 Hey Ziggy, Your solution worked great so I added it to my desktop blog summaries as well, but it has caused extra white space to appear. I've tried tweaking the padding with no success. Do you know how this can be fixed? (See attached image.) Thanks! 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