Removing padding between rows of summary grid

Site URL: http://officialvillas.com/socialwall

Hi There, 

I'm using a summary block to create a photo grid - but would like no space between images. Currently can't seem to get rid of the padding between rows?? I am using some custom css that i found online to create rollover txt effect. Could that be causing this problem? 

I'm pretty new to all this, so i'd really appreciate some help. 

One thing i've also noticed...while my click-thru image links work, there seems to be a problem when hovering directly over the rollover txt.  Any solutions would be appreciated too. Thanks 

@media screen and (min-width:800px){
.summary-item {   
    img {    
      transition: all .5s ease!important;  
    }   
    .summary-content {   
      position: absolute;  
      color: #fff;     
      top: 50%;  
      left: 50%;  
      opacity: 0;   
      transition: all .5s ease;   
      transform: translate(-50%, -50%);  
      -webkit-transform: translate(-50%, -50%);  
      -ms-transform: translate(-50%, -50%);  
      -moz-transform: translate(-50%, -50%); 
     }
  }  
  .summary-item:hover {  
    img {     
      -webkit-filter: brightness(50%);  
      filter: brightness(50%);  
    }   
    .summary-content {   
      opacity: 1; 
    } 
    .summary-thumbnail-container,
.summary-excerpt {
margin-bottom: 0 !important;
}
  }
}

Add to Home > design > Custom CSS

.sqs-block-summary-v2 .summary-thumbnail-container {
    margin-bottom: 0 !important;
}

thanks so much tuanphan! it worked perfectly! any ideas about the issue i mentioned above with the text / link? 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(".sqs-block-summary-v2 .summary-item").click(function() {
  window.location = $(this).find("a").attr("href"); 
  return false;
});
</script>

Add to Home > Design > Custom CSS

Thanks again so much. I'm having some trouble figuring out where to paste this. I keep getting a syntax error on the first line of the most recent code you sent. 

Here's all of the code not excluding the code above. Any ideas? Thanks again so much for your help. 

@media screen and (min-width:800px){
.summary-item {   
    img {    
      transition: all .5s ease!important;  
    }   
    .summary-content {   
      position: absolute;  
      color: #fff;     
      top: 50%;  
      left: 50%;  
      opacity: 0;   
      transition: all .5s ease;   
      transform: translate(-50%, -50%);  
      -webkit-transform: translate(-50%, -50%);  
      -ms-transform: translate(-50%, -50%);  
      -moz-transform: translate(-50%, -50%); 
     }
  }  
  .summary-item:hover {  
    img {     
      -webkit-filter: brightness(50%);  
      filter: brightness(50%);  
    }   
    .summary-content {   
      opacity: 1; 
    } 
    .summary-thumbnail-container,
.summary-excerpt {
margin-bottom: 0 !important;
}
  }
}.sqs-block-summary-v2 .summary-thumbnail-container {
    margin-bottom: 0 !important;
} 

ah sorry, add to Home > Settings > Advanced > Code Injection > Footer

awesome. you're  a lifesaver!  so i posted the script into the code injection footer - and i can now click on the text area and it will go to the linked page. any idea why the "hand" pointer that indicates a clickable area disappears when hovered over the txt? 

4 hours ago, Bumblelion said:

awesome. you're  a lifesaver!  so i posted the script into the code injection footer - and i can now click on the text area and it will go to the linked page. any idea why the "hand" pointer that indicates a clickable area disappears when hovered over the txt? 

Add to Home > Design > Custom CSS

.summary-excerpt {
    cursor: pointer;
}

thanks so much! Looks like everything's working now! I really appreciate your help with this. Couldn't have done it without you 🙂