MiaMiaMia

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!

@tuanphan any chance you can help here?

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;} } }

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;} } }

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!

I just used this for the exact same problem and it's perfect (thank you!!). I want to add padding between the text and image. @tuanphan can you advise?