Jump to content

Summary Block Title, Excerpt, Metadata on One Line

Recommended Posts

Hey! I'm about to start working on a site where I want to creatively use the list summary block. Instead of the title, excerpt, and metadata being stacked on top of one another, I wanted to see if it would be possible to get these on the same line horizontally. 

I tried messing with top and left margins for .summary-content, .summary-excerpt, etc. and it was really sloppy and obviously didn't work for different screen sizes. 

I've attached an image that gives an idea of what I'm trying to do. Thank you in advance if anyone can help me figure this out!

Screen Shot 2020-11-20 at 4.31.52 PM.png

Link to comment

I think I actually figured it out using this code:

.summary-excerpt{
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-column-gap: 5px !important;
    grid-row-gap: 5px !important;
   position: static !important;
}

.summary-content {
 height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-column-gap: 5px !important;
    grid-row-gap: 5px !important;
    position: static !important;
}

If this looks sloppy or you have other suggestions, I am all ears! I currently just have a test site up to play with this. 

https://testknowling.squarespace.com/

password: view

 

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.