Jump to content

Shorten blog excerpt and remove categories from blog collection page (mobile view only).

Go to solution Solved by Ziggy,

Recommended Posts

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!

 

InkedScreenshot 2022-09-29 092953.jpg

Edited by KatieQ
Updated photo.
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

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!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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!

Screenshot 2022-10-02 164105.jpg

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.