KwameAndCo

Might not be exactly what you're looking for but the Table of Contents plugin I just released might be suitable. I built it about a month ago for a client and just finished updating the accessibility features for v1.1. It turns all of your headings into a dropdown with anchor links that can be sticky and is mobile responsive. Alternatively, you could check out the Adlytic Marketing Table of Contents which also offers something very similar and is another great option. The idea you have there is pretty cool and could be another idea for a plugin but isn't something that currently exists. Maybe I'll build one if I get a chance.

You have made your blocks bigger than needs be. Harder to show without access to your site but look at the below image. The lime green area is the grid. The blue line signifies the area occupied by the block. Essentially, for some reason, you've made the block many grid squares taller than it needs to be. Are you using the block height for spacing or something? It also looks like you have zero section height so if a block goes to the bottom of the section, then there will be no gap between it and your next one.

If you're using Fluid Engine - i.e. if it's a site built in the last year - you can swap to mobile view and resize/move the images around the grid there. Or are you using a Gallery Section?

Happy to have helped.

For whatever reason the code doesn't work without the "column-start" property. I've amended my code and it should now work: /*Squareskills center list grid item widows*/ ul.user-items-list-item-container.user-items-list-simple { @media screen and (min-width: 768px){ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; li.list-item:nth-child(3n-2) { grid-column-start: 3; grid-column-end: 5; } } @media screen and (min-width: 576px){ grid-template-columns: 1fr 1fr 1fr 1fr; li.list-item { grid-column: span 2; } li.list-item:nth-child(3n-2) { grid-column-start: 2; grid-column-end: 3; } } }

Have you tried: .sqs-block-accordion { height: auto!important; }

Use .sqs-gallery-design-autogrid .summary-content { padding: YOURPADDING; } .summary-title, .summary-excerpt, .summary-metadata--primary, .summary-metadata--secondary { transition: all ease-in-out .3s; } .sqs-gallery-design-autogrid .summary-item:hover { background-color: #BDDC02 !important; box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2) !important; opacity: 1; transition: all ease-in-out .3s; .summary-title, .summary-excerpt, .summary-metadata--primary, .summary-metadata--secondary{ color:#1a3868; } } And you should be golden.

Hey @JacquiB Might I suggest using the "Social Icons Everywhere" plugin by @RolandFuseHub and SQSMods? It's pretty much made for this. You can see an example I used for a client here within a List Section, so it's very flexible and easy to use. https://en.lj-partner.com/ueberuns

@pauljason330 are you using an AI chatbot to write your responses? I'm trying to examine but the password isn't working. The issue is likely with Custom CSS using LESS preprocessor. The "repeat" function works funky with it. You can just swap out the two instances like below. grid-template-columns: ~"repeat(6,1fr)"; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; I thought using quotes would fix it as that works for a few things. Sorry for the oversight. Just put the number of columns using "1fr" instead like I have above. But sort the password and I can look again.

Hey For future requests, try not to link to your dashboard and just link to the site. I.e. leave off "/config/..." as clicking that will make a login attempt and it just frustrates things. Anyway, use: /*Squareskills center list grid item widows*/ ul.user-items-list-item-container.user-items-list-simple { @media screen and (min-width: 768px){ grid-template-columns: ~"repeat(6,1fr)"; li.list-item:nth-child(3n-2) { grid-column-start: 3; grid-column-end: 5; } } @media screen and (min-width: 576px){ grid-template-columns: ~"repeat(4,1fr)"; li.list-item { grid-column: span 2; } li.list-item:nth-child(3n-2) { grid-column-start: 2; grid-column-end: 3; } } } That should also account for tablets and mobile. NOTE: This is only for 3 column grids. You may wish to use a section ID too for specificity.

Please mark my response as a solution for others. If you're gong to do it on all pages, you'd need to put this in the section in a markdown/code block and make sure it's at the top of the section (especially on mobile). <div style="display:none" id="yourid"></div> .. and then add this to the global footer. <script> // @Squareskills - Link Logos to Section document.querySelectorAll('.header-title-logo a, .header-mobile-logo a').forEach(link => link.href = '/#yourid'); </script> Making sure to change "yourid" to whatever you want in both instances!

Your current code only covers the hover state. Instead use: /* @Squareskills - Summary Slide Up*/ .summary-item: { transition: transform ease-in-out 0.8s !important; } .summary-item:hover { transform: translateY(-10px); } I'd also very possibly

Where are you currently using it?

Sadly this isn't possible. The best bet you could do is to create a blog and do a post for each page in your portfolio - then have the blog links clickthrough to the blog. It's a bit clunky though.

Can you explain how it's breaking? I think you're honestly limited by Figma

Did you use your sectionID? Might wanna share the site.

Link to the website so we can assist better.

If you're on a business plan or higher, you can do this with javascript. Are you?

Clone the page. Set it to 3 items. Link me to the page. And then I can send some CSS. Basically you need to set it to 3 columns in advance and we'll write something to reposition. Your current setup is not going to work long term but yeah, just do that and it should be a couple lines of CSS.

You need to add a password so I can see. https://support.squarespace.com/hc/en-us/sections/360000368887-Site-availability

You need to link to the website too. Also, please use @ to tag me so that I get a notification, or quote my post as I'm signing out and won't know you've replied otherwise.

Using something like Heather Tovey's block identifier browser extension you can find the block ID. Then go to custom CSS and paste this, updating it as you need. #yourblockid .sqs-block-button-element{ color: white; /*Your text colour code goes here*/ background-color: black; /*Your background colour code goes here*/ } #yourblockid .sqs-block-button-element:hover { color: white; /*Your hover text colour code goes here*/ background-color: black; /*Your hover background colour code goes here*/ }

Try this. It should apply it to all portfolio items in thte collection. @media screen and (max-width: 768px) { body.collection-6450e2e282b303015a296d3e[id^="item-"] .page-section:first-child { min-height: 30vh!important; } } Anyone else looking to replicate, replace the "collection-6450e2e282b303015a296d3e" with whatever the collection ID is from the parent portfolio page and it'll work. As a bonus, this'll target specific collecitons only rather than all Portfolios on the site. Let me know if it works.

@D-LAT, @ben55 and @thesimpleexplorer As @tuanphan said, share the site. If you don't know how to, you can use the following help article. https://support.squarespace.com/hc/en-us/articles/205810548-Accessing-and-sharing-a-trial-site It's hard to help you without being able to actually look at the page in question, so share the site and the specific page the issue is on.

https://support.squarespace.com/hc/en-us/articles/205810548-Accessing-and-sharing-a-trial-site Set a password as above. Again, it's best for me to see the site first. Yours could be made to work in a very hacky way by adding "margin: auto;" too but that's not a long term fix. If you set the site to password I can take a look tomorrow and show you how to do it right. It's pretty simple but I can't remember all the classes etc off the top of my head.