Blog summary blocks - "read more" button not working on mobile

Site URL: https://the-nurse-on-wheels-trialmode.squarespace.com

Hello! I have added some custom CSS to jazz up the Summary Block for a blog.  The "Read More" link works on desktop and tablet view, but in mobile the link no longer works.

https://the-nurse-on-wheels-trialmode.squarespace.com/config/design/custom-css
PASS: 1284Bandit

This is the code I used from Ghost Plugins. 

// DB Summary Block Design //

.sqs-block-summary-v2 .summary-item {
  background-color: #fffefa;
  border-radius: 25px;
  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
}

// DB Summary Block Image Radius //

.sqs-block-summary-v2 .summary-thumbnail {
  border-radius: 10px 10px 0px 0px;
}

// DB Summary Content Padding //

.sqs-block-summary-v2 .summary-item .summary-content {
    padding: 5px 40px 15px 20px;
}

// DB Summary Block Button //
.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
  display: inline-block;
  margin-top: 10px;
  background: linear-gradient(to right, #F13000, #F13000 );
  color: white;
  border: 0px solid white;
  border-radius: 50px;
  padding: 10px 20px;
}

/* Tablet summary 3 columns */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-yui_3_17_2_1_1627577686982_2001 .summary-item {
    width: calc(30.3333% - 3px) !important;
    float: left !important;
    clear: none !important;
    margin: 20px !important;
}
}

//center summary block, unlink from bios//
@media only screen and (max-width: 640px) {.sqs-gallery-design-autogrid .summary-item-list {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  
 pointer-events: none;

}}

4 hours ago, oldegray said:

Site URL: https://the-nurse-on-wheels-trialmode.squarespace.com

Hello! I have added some custom CSS to jazz up the Summary Block for a blog.  The "Read More" link works on desktop and tablet view, but in mobile the link no longer works.

https://the-nurse-on-wheels-trialmode.squarespace.com/config/design/custom-css
PASS: 1284Bandit

This is the code I used from Ghost Plugins. 

 

// DB Summary Block Design //

.sqs-block-summary-v2 .summary-item {
  background-color: #fffefa;
  border-radius: 25px;
  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
}

// DB Summary Block Image Radius //

.sqs-block-summary-v2 .summary-thumbnail {
  border-radius: 10px 10px 0px 0px;
}

// DB Summary Content Padding //

.sqs-block-summary-v2 .summary-item .summary-content {
    padding: 5px 40px 15px 20px;
}

// DB Summary Block Button //
.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
  display: inline-block;
  margin-top: 10px;
  background: linear-gradient(to right, #F13000, #F13000 );
  color: white;
  border: 0px solid white;
  border-radius: 50px;
  padding: 10px 20px;
}

/* Tablet summary 3 columns */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-yui_3_17_2_1_1627577686982_2001 .summary-item {
    width: calc(30.3333% - 3px) !important;
    float: left !important;
    clear: none !important;
    margin: 20px !important;
}
}

//center summary block, unlink from bios//
@media only screen and (max-width: 640px) {.sqs-gallery-design-autogrid .summary-item-list {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  
 pointer-events: none;

}}

 

remove this line, it block all pointer click in your summary list

THANK YOU!!!