Summary Block seems unresponsive for smaller screens

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

Please provide your site password

Welcome1

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

Thank you @Bangank36. However, this doesn't seem to be working. When my screen shrinks for me to make edits, the summary items just get distorted and large.

I left the code in the custom css so you can let me know what I'm going wrong

update-I think I fixed it as of now

11 minutes ago, trusocialite said:

update-I think I fixed it as of now

must be a cache issue