Hide banner cards on specific pages?

Hiya,

Is there a way to hide banner cards on specific pages with CSS coding?.

I'd like to have it only on the first and last page of the Banner:Slideshow . (Professional and University pages ).

web: osman-b-zaman.squarespace.com

pass: PASS700

Kind Regards

Add the following to Page Settings > Advanced > Page Header Code Injection for the pages. Please see per-page code injection.

<style>

  /* Professional */
  
  #collection-63e9834599b6e26300a46311 .user-items-list-banner-slideshow .list-item[ data-is-card-enabled="true" ]:not( :first-child ):not( :last-child ) .list-item-card-background,
  
  /* University */
  
  #collection-63ac6ed12bd73d77884af291 .user-items-list-banner-slideshow .list-item[ data-is-card-enabled="true" ]:not( :first-child ):not( :last-child ) .list-item-card-background
  
    {
    
      display : none;
      
      }
      
  </style>

Let us know how it goes.

Thx, is there a workaround without upgrading to business plan?

6 hours ago, Osman01 said:

Checked the CSS code and I received "Syntax Error on line 4".

 

Apologies for the issues. Not sure how the syntax errors got there. I did get the logic wrong for which ones you wanted to show/hide.

I updated my code and made it less verbose as a bonus. If you use the new code it should be easier to maintain.

Thanks!