Jump to content

Looking for CSS to hide the first item in a summary block

Go to solution Solved by Ziggy,

Recommended Posts

Basically i just need to know the selector that will enable me to hide the first item of any summary block.

The way I am currently using them is that everything but the most recent post is set to "featured" and then the most recent post is a banner at the top of the page.

How I would LIKE to use them is to have two summary blocks side-by-side, one with the image/excerpt that is the most recent (easy to do, just set the block to "1 item") and then have a block next to it with JUST the titles of the next 4-5 items getting pulled into the summary block from a blog. So if you're looking at the attached image, the "In Conversation:..." would be removed from the block on the right"

This should be just a simple .summary-block li:first-child { display: none; } but that doesn't seem to be working. Likely because it is just the wrong selector. 

Screenshot 2023-04-19 110904.png

Link to comment

Can you share your website URL?

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

This CSS will work, but you'll have to add the correct block ID:

#block-yui_3_17_2_1_1681923007253_2721 {
  .summary-item:nth-child(1) {
    display:none;
  }
}

This is how to find a block ID:
https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

Hope that helps!

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 months later...
12 hours ago, SarahBethGraphics said:

code worked to hide my first post but it left a blank space. Is there a way to have posts shift over?

The way SS is constructing the summary blocks make working with it a bit involved as far as CSS goes.

Try the following CSS. It reworks the summary into a grid overriding what SS is doing with absolute positions and calculating a bunch of things.

/* bgin hide first post */

#block-yui_3_17_2_1_1687259404429_151375 .sqs-gallery-design-autocolumns-slide {

  position : unset;
  
  }

#block-yui_3_17_2_1_1687259404429_151375 .summary-item-list {

  height : unset !important;
  
  }

#block-yui_3_17_2_1_1687259404429_151375 .summary-item {

  height : auto !important;
  left : unset !important;
  top : unset !important;
  width : unset !important;
  
  }

#block-yui_3_17_2_1_1687259404429_151375 .summary-item:first-child {

  display : none;
  
  }

#block-yui_3_17_2_1_1687259404429_151375 .summary-item-list {

  display : grid;
  gap : 1.5vw;
  grid-template-columns: repeat( 3, 1fr );
  
  }

@media

  only screen and ( pointer : coarse ) and ( max-width : 1024px ),
  screen and ( max-width : 799px )
  
    {
    
      #block-yui_3_17_2_1_1687259404429_151375 .summary-item-list {
      
        grid-template-columns: repeat( 2, 1fr );
        
        }
        
      }
      
/* end hide first post */

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 months later...
3 minutes ago, medleythink said:

I was struggling with figuring out which ID to use but I tried several and no luck.

Try this Custom CSS, I've added the correct block ID:

#block-f7a851d0db81be0ae321 {
  .summary-item:nth-child(1) {
    display:none;
  }
}

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, medleythink said:

That works thanks!

Fantastic!

Try this for finding block and section IDs:

https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 5 months later...

Hello, please can you help I have an issue similar same as this post.
I had this code in my custom CSS to hide the first article in the summary post (right hand side), which used to work.

#block-df553bc98358e7de3ff7 {

  .summary-item:nth-child(1) {

    display:none;

  }

However it is now not working?

image.thumb.png.df65e99ffa839c7317bce090db5e8071.png


I have tried editing the section ID, which I found through inspect element, I can see how it would be the incorrect ID?

#block-yui_3_17_2_1_1709166436430_614 {

  .summary-item:nth-child(1) {

    display:none;

  }

Please help thanks a million

https://burgundy-sepia-c5lz.squarespace.com/

Link to comment
56 minutes ago, Ems-H said:

I had this code in my custom CSS to hide the first article in the summary post (right hand side), which used to work.

The block id in your code in no longer relevant. It needs to be updated with the current block id.

Check out Heather Tovey's most excellent looking Squarespace ID Finder or you can use the inspector if you are familiar with how to use it.

I suspect what may have happened is either you upgraded to fluid engine which may have changed the block id number or you created a new summary block which would also get a new block id.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
7 hours ago, Ems-H said:

I have tried editing the section ID, which I found through inspect element, I can see how it would be the incorrect ID?

Your block ID does look incorrect, try this:

#block-f1ecacb894722ba6895c {
  .summary-item:nth-child(1) {
    display:none;
  }
}
Edited by Ziggy

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.