Jump to content

Summary Block seems unresponsive for smaller screens

Recommended Posts

Site URL: https://selfieconsulting.squarespace.com

Hello,

I am using the following code that I copied from Ghost Plugins website to style a summary block. I'm not sure if this is a code issue or if I just need to add additional code, but as the screen gets smaller; say tablet mode, I would prefer the summary block to maintain the 3 to a row layout that I have. Instead, it is converting to 2 on a row and then 1 on the following row. Any help would be greatly appreciated. I'd also like for all sections to be the same height regardless of content.

 

 

// DB Summary Block Design //
.summary-thumbnail-image
{margin-top:%;border-top-left-radius:15px;
border-top-right-radius:15px;}

.summary-title-link 
{color:#d92e4a;
  font-family: mrs-blackfort; 
  font-weight:bold;
  font-size:150%}
.sqs-block-summary-v2 .summary-item {
  background-color: #ffffff;
  border-radius: 15px;
  -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 20px rgba(100, 100, 100, 0.2) !important;
}


// DB Summary Content Padding //

.sqs-block-summary-v2 .summary-item .summary-content {
    padding: 10px 40px 10px 40px;
}


// DB Summary Block Button //

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {display: inline-block;
  margin-top: 10px;
  background: #d92e4a;
  color: #fff !important;
  text-transform:uppercase;
  border: 2px solid #d92e4a;
  border-radius: 50px;
  padding: 5px 20px;
}

image.thumb.png.272c1f8f4bb273428e251e70c47a452d.png

image.thumb.png.352eca3277fbe62d429225f66c9b7d6d.png

Link to comment

Please provide your site password

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
Quote

 

Made it 3 col on tablet

@media screen and (max-width: 1200px) and (min-width: 640px) {
    #block-yui_3_17_2_1_1600089920093_7703 .summary-item-list {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 10px;
    }
    #block-yui_3_17_2_1_1600089920093_7703 .summary-item {
      width: 100% !important;
    }
}

image.thumb.png.d59e65131073be62e979b958b9a1701e.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
11 minutes ago, trusocialite said:

update-I think I fixed it as of now

must be a cache issue

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.