otohmatthew Posted March 13, 2021 Share Posted March 13, 2021 (edited) Site URL: https://portfolio-test-site.squarespace.com/events EDIT — So as it turns out, I've manage to solve this myself. Please see second comment for solution. Hi there, I'm about to wrap up this client website, and have run into some final roadblocks. Would be grateful for some help, please. I'm trying to change the 'Title' and 'Excerpt' position of the text in a summary block so that it overlaps the thumbnail like the below example. Website:https://portfolio-test-site.squarespace.com/events Password: Hello123 Edited March 13, 2021 by otohmatthew Provided Solution, trimmed some words Link to comment
otohmatthew Posted March 13, 2021 Author Share Posted March 13, 2021 (edited) I thought I'd leave the question up just in case someone needed a solution sometime in the future. A solution that worked for me was simply this: Change summary title styling // * Change Title Font * // .summary-title{ font-family:"Poppins"; font-weight: 500; font-size: 1.8vw!important; padding-bottom: 6%; color:#000; } Change width of each summary item //Change width of Thumbnails// .sqs-block-summary-v2 .summary-item.positioned { width: 33% !important; position: static; } .sqs-block-summary-v2 .summary-item-list { display: flex; flex-wrap: wrap; flex-direction: row; } Overlap image thumbnail .summary-v2-block.sqs-block-summary-v2 .summary-content { position: relative; bottom: 25%; } Finally, change the summary excerpt to be a button (make sure to add a link to your text in the summary item settings) .summary-v2-block.sqs-block-summary-v2 .summary-content { position: relative; bottom: 25%; } Additional button styling (colour on hover) Quote .summary-excerpt { a:hover { background-color: hsl(60, 4%, 11%) !important; color: #fff; transition: .1s; } } If you wanted to apply this to specific pages you can open with #link-of-your-page { and close using } Edited March 13, 2021 by otohmatthew tuanphan and tors 2 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment