Jump to content

otohmatthew

Circle Member
  • Posts

    5
  • Joined

  • Last visited

otohmatthew's Achievements

  1. 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) If you wanted to apply this to specific pages you can open with #link-of-your-page { and close using }
  2. 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
  3. Hi there. Not sure which template you're using, but pasting this into your header injection should work <style> .Header { visibility: hidden!important; } </style> edit: Just in case You can access the header code injection by going to pages > page settings > advanced on the specific page you want to be effected.
  4. Perfect solution, works great. Thank you so much! Much appreciated.
  5. Site URL: https://portfolio-test-site.squarespace.com/ Hi everyone, Hope you're all doing well. Have spent the last two hours trying to find a solution to my problem, so I would be grateful if someone here could help me out, please. I have created a website here: https://portfolio-test-site.squarespace.com/ Password: Hello123 Currently, I'm trying to build a team page that displays a description when the image is hovered. To achieve this, I am using a Poster Image Block and the following CSS: .design-layout-poster:hover .image-card-wrapper { visibility: visible; opacity: 0.98; background-color: #F9D36E; } .design-layout-poster .image-card-wrapper { visibility: hidden; opacity: 0; transition-duration: 0.25s; } This works successfully. However, sometimes the description is quite long and the text will overflow outside of the image bounds on certain viewports. See below image of the issue. I understand this is a pretty extreme case, and text will rarely be this lengthy, however, I think it illustrates the problem best. To remedy this, I've tried to set overflow to scroll using the following: .design-layout-poster .image-card-wrapper { overflow-y: scroll!important; } Which successfully adds a scroll bar, but the scrollbar itself is not scrollable. So I have three questions: How can I properly set this up so that any overflow text can be scrollable? How can I set the text to be aligned to the top of the card wrapper (currently it aligned to centre) And is it also possible to hide the scrollbar (or at least the additional white box that it creates?) Any help would be greatly appreciated! Thanks Matthew
×
×
  • 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.