Bumblelion Posted March 13, 2020 Share Posted March 13, 2020 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
tuanphan Posted March 14, 2020 Share Posted March 14, 2020 Add to Home > design > Custom CSS .sqs-block-summary-v2 .summary-thumbnail-container { margin-bottom: 0 !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Bumblelion Posted March 14, 2020 Author Share Posted March 14, 2020 thanks so much tuanphan! it worked perfectly! any ideas about the issue i mentioned above with the text / link? Link to comment
tuanphan Posted March 14, 2020 Share Posted March 14, 2020 <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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Bumblelion Posted March 14, 2020 Author Share Posted March 14, 2020 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
tuanphan Posted March 14, 2020 Share Posted March 14, 2020 ah sorry, add to Home > Settings > Advanced > Code Injection > Footer Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Bumblelion Posted March 15, 2020 Author Share Posted March 15, 2020 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
tuanphan Posted March 15, 2020 Share Posted March 15, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Bumblelion Posted March 16, 2020 Author Share Posted March 16, 2020 thanks so much! Looks like everything's working now! I really appreciate your help with this. Couldn't have done it without you 🙂 Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.