Jump to content

Removing padding between rows of summary grid

Recommended Posts

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

Link to comment
  • Replies 8
  • Created
  • Last Reply
<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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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;

Link to comment

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? 

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.