Jump to content

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

Recommended Posts

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;

}}

 

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

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

image.png.177732a545b8f85791ec627b712273cf.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.