Make summary block non-clickable

Site URL: https://www.cooper-horowitz.com/our-services

Hi, for my website I added custom CSS to make the summary blocks non-clickable, it worked great on this page:

https://www.cooper-horowitz.com/recent-transactions

Here is the CSS I added: 

.sqs-block-summary-v2 .summary-item  {
  pointer-events: none;
}

The Services page is set up the same way in terms of using a summary block to display info in a grid:

https://www.cooper-horowitz.com/our-services

The CSS above isn't working on this page and nothing I've tried has solved it. Please help!

The code is actually...

#collection-60524ad9bab3017fc972e91c .sqs-block-summary-v2 .summary-item {
    pointer-events: none
}

The #collection-60524ad9bab3017fc972e91c restricts the effect to the one page. If you want the effect site wide remove #collection-60524ad9bab3017fc972e91c. If you want to restrict to only certain pages then you'd do something like the following.

#collection-12324ad9bab3017fc972exyz .sqs-block-summary-v2 .summary-item, /* other page indentifier comment here */
#collection-60524ad9bab3017fc972e91c .sqs-block-summary-v2 .summary-item /* recent transactions */

  {
  
    pointer-events : none;
    
  }

Let us know how it goes.

Quote

If you want the effect site wide remove #collection-60524ad9bab3017fc972e91c.

I do want it sitewide, this is what I tried in my original comment and it is not working sitewide.

I also tried this code you pasted:

#collection-12324ad9bab3017fc972exyz .sqs-block-summary-v2 .summary-item, /* other page indentifier comment here */
#collection-60524ad9bab3017fc972e91c .sqs-block-summary-v2 .summary-item /* recent transactions */

  {
  
    pointer-events : none;
    
  }

Results:

- No change on Services Page, the images were still clickable.

- Recent Transactions page *became* clickable with this update.

Because it made the page clickable I removed it. Not sure if the collection numbers were accurate or I was supposed to replace them?

Regardless, sitewide is what I'm aiming for if you have any advice! The weird thing is when I edit this in Inspect tool on the front end it works but not when I add it to the CSS file. I'm pasting my full CSS file here in case there is something overriding it that I'm not seeing.

/* Services page styling */
#collection-60523bd15e2b4b29bde73c3e {
.summary-item {background: white;
padding: 20px;
border-radius: 4px;
  min-height: 250px;
}
.summary-title {
  color: #000000;
  font-weight: 600;
}
.bright .sqs-block-summary-v2 .summary-excerpt {
  color: #000000;
}
.summary-thumbnail-container {width: 100%;}
.summary-thumbnail-container{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}
}
/* type styling sitewide */
h1 {
  margin-top: 0px;
  margin-bottom: 0px;
}
h2{
  margin-top: 0px;
  margin-bottom: 15px;
}
h3 {
  margin-top: 20px;
  margin-bottom: 0px;
}
h4 {
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1.5
}
p {
  margin-top: 0px;
  margin-bottom: 0px;
}
/* Timeline styling */
section[data-section-id="607cc80f4e536602170e39d1"]{
.sqs-layout .sqs-row .sqs-block:last-child {
    padding-bottom: 34px !important;
}
.sqs-layout .sqs-row .sqs-block:first-child {
    padding-top: 0px !important;
}
}
/* Deals page */
#collection-60524ad9bab3017fc972e91c{
.sqs-gallery-design-carousel .sqs-gallery-container {
  overflow: visible;
}
.page-section {
  overflow-x: hidden;
}
.sqs-block-summary-v2 .summary-item  {
  pointer-events: none;
}
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-heading {
  font-family: teimer-web;
}
  /*services page*/
  
.sqs-block-summary-v2 .summary-item-list  {
  pointer-events: none;
}
.summary-title {
      font-family: teimer-web;
  }
  /*deals nav -- desktop only*/
.deals_nav {
  text-align: center;
  ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
}
li {
  display: inline;
  padding: 10px 25px;
  background-color: #e0e0db;
  margin: 8px;
  border-radius: 5px;
  text-transform: uppercase;
  font-size: .8rem;
  font-weight: 500;
}
}
@media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1620175624532_6471 {display: none;}
}
@media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1618270568173_3409 {display: none;}
}
}

Add the following to Design > Custom CSS.

body:not( .sqs-edit-mode ) .sqs-block-summary-v2 .summary-item-list {

  pointer-events : none;
  
  }

This is a site-wide effect.

Ok I really have no idea what I'm doing wrong but I just added what you had and commented out the previous versions and it's clickable. Here is the full file again and I'm leaving it "broken" for now so you can hopefully see what is happening??

body:not( .sqs-edit-mode ) .sqs-block-summary-v2 {

  pointer-events : none;
  
  }
/* Services page styling */
#collection-60523bd15e2b4b29bde73c3e {
.summary-item {background: white;
padding: 20px;
border-radius: 4px;
  min-height: 250px;
}
.summary-title {
  color: #000000;
  font-weight: 600;
}
.bright .sqs-block-summary-v2 .summary-excerpt {
  color: #000000;
}
.summary-thumbnail-container {width: 100%;}
.summary-thumbnail-container{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}
}
/* type styling sitewide */
h1 {
  margin-top: 0px;
  margin-bottom: 0px;
}
h2{
  margin-top: 0px;
  margin-bottom: 15px;
}
h3 {
  margin-top: 20px;
  margin-bottom: 0px;
}
h4 {
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1.5
}
p {
  margin-top: 0px;
  margin-bottom: 0px;
}
/* Timeline styling */
section[data-section-id="607cc80f4e536602170e39d1"]{
.sqs-layout .sqs-row .sqs-block:last-child {
    padding-bottom: 34px !important;
}
.sqs-layout .sqs-row .sqs-block:first-child {
    padding-top: 0px !important;
}
}
/* Deals page */
#collection-60524ad9bab3017fc972e91c{
.sqs-gallery-design-carousel .sqs-gallery-container {
  overflow: visible;
}
.page-section {
  overflow-x: hidden;
}
/*.sqs-block-summary-v2 .summary-item  {
  pointer-events: none;
}*/
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-heading {
  font-family: teimer-web;
}
  /*services page*/
  
/*.sqs-block-summary-v2 .summary-item-list  {
  pointer-events: none;
}*/
.summary-title {
      font-family: teimer-web;
  }
  /*deals nav -- desktop only*/
.deals_nav {
  text-align: center;
  ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
}
li {
  display: inline;
  padding: 10px 25px;
  background-color: #e0e0db;
  margin: 8px;
  border-radius: 5px;
  text-transform: uppercase;
  font-size: .8rem;
  font-weight: 500;
}
}
@media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1620175624532_6471 {display: none;}
}
@media only screen and (max-width: 768px) {#block-yui_3_17_2_1_1618270568173_3409 {display: none;}
}
}

@tuanphan any chance you can help here?

My apologies. I forgot to mention that the effect is disabled in Preview. You have to use private browsing to check the effect.

The effect it working on your site now.

Ok this *was* working but then my client noticed that the arrows on the Recent Transaction page were no longer clickable. So I reverted and now I'm back to the original issue again. So sorry for all the confusion, if you have any further suggestions please let me know!

Remove the following rulesets from Design > Custom CSS.

#collection-60524ad9bab3017fc972e91c .sqs-block-summary-v2 .summary-item {
    pointer-events: none
}

#collection-60524ad9bab3017fc972e91c .sqs-block-summary-v2 .summary-item-list {
    pointer-events: none
}

Then add the code from my updated July 7th post.

The new code should turn off pointer events for just the list part of the summary block, not the controls.

Let us know how it goes.

Hey @creedon! 

I'm attempting a the same disable the summary click for one page on my site. I can use the code to disable across the whole site successfully, but how do I go about targeting it to our /about page? 

This is the code for the recent transaction example from above. How would I direct this to our /about? Sorry, I'm nearly CSS illiterate. 

#collection-60524ad9bab3017fc972e91c .sqs-block-summary-v2 .summary-item /* recent transactions */

  {
  
    pointer-events : none;
    
  }

Thanks in advance! 

Your taget code is not the same for other sites. You would need to post the site url in order to get the proper id for the block you want to disable the click thru for. 

@derricksrandomviews Right, that makes sense -- just wondering how that would be formatted in CSS?

 

#collection-60524ad9bab3017fc972e91c .sqs-block-summary-v2 .summary-item /myurl?/

  {
  
    pointer-events : none;
    
  }

I think you have it formatted correctly. You can possibly get the id yourself using the chrome extenison available here: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde?hl=en-US