AndyKhouri

Oops! Try this: https://turtle-kumquat-lsg8.squarespace.com/test-page Password: circlehelp

Thanks so much! One more question on this. Is it possible to tweak this code to work in Page Settings > Advanced, as opposed to Design > Custom CSS? The reason I'd like to do that is to keep things manageable page per page. Here's a screenshot of the code that's not plugging in for some reason (I am using the opening and closing style tags).

I'd like to adapt this technique to include more sections. Assuming that's even possible, could you annotate the code to indicate where to plug each section ID? For example /*Section 1 goes here*/ etc?

Hey, this seems to have done the trick. Thanks so much!

I'm trying to do something similar but ideally more simple. Is anyone aware of a way for a page with only two sections -- one main and one footer -- to share the same background? Here's a screenshot of what I'm running into. If it was just a static image I know there's a code for that, but I'm using the animated effects and would like those to run under the footer as well. But of course the footer is a different section and any effects applied there are going to clash with those of the other section. I fear what I'm trying to do may not be possible. https://turtle-kumquat-lsg8.squarespace.com/section-background-test password: squarespacehelp

I think I figured this out. If you put this code into the header code injection, you use a single gradient underneath all sections. And when you copy the code and adjust it for a different page, it affects only that page. Just replace my gradient particulars with your own. <style> .site-wrapper { background: linear-gradient(100deg, #000000, #ffffff)!important; } </style>

Thanks so much! The code worked. One more question: is there a way to control the line height, letter spacing, etc. like with other text on the site? Doesn't seem to have an obvious control panel in the Font controls.

Hey this is great! A followup: is there a way to adjust this code for gradients? I tried it but it adds the gradient for each section rather than placing one gradient behind all sections. Here's an example in the screenshot; there's just one section on this page, the rest is blank.

I'm having trouble with this too. Surprisingly there's no built-in option to change the background color on a page-by-page basis, only the whole site. I just want to make certain pages have a solid black (#000000) background behind all the sections, top to bottom (including header and footer). Ideally this is something I could add to the header injection of specific pages, as my site-wide Custom CSS is getting crowded! But if that is the case, I know how to grab my site collection/sections codes, I just need the code to plug those into. Thanks in advance for any help.

Is there a code to make line breaks in gallery grid titles? Using the "<br/>" code in the title text doesn't seem to work. Here's how I'm doing it (Screenshots).

Hover + overlay + text please! Thx

I think I have a workaround for this but it's very annoying and Squarespace really needs to add this feature properly. We can't seem to use Portfolios and Projects the way we need to, but we can possibly fake it by creating our Projects as normal Pages and using the Image Gallery function to simulate the Portfolio layouts. The thumbnails can link to the Project Pages and we can build the pagination into each page. Here's a quick and dirty demo: https://pineapple-guitar-4h86.squarespace.com/portfoliohack password: squarespacehelp The problem for me is the Gallery function's Simple Grid mode doesn't allow for hover text overlays like the Portfolio does (another bizarrely missing feature). There must be a relatively simple way to hand-code that and style it? Assuming there is, I think you could have something that looks like a Portfolio page and functions like one ought to.

Site URL: http://andykhouri.com I fear this may be a stupid question but I haven't found it anywhere else yet, so I'm taking the plunge. Screenshot 1: My site in Desktop. Screenshot 2: My site in Tablet. Screenshot 3: My site in iPhone. Desktop and iPhone look perfect, but the Tablet view is messed up. I used a custom code to disable the mobile navigation, but the text and portfolio widths are full bleed, rather than conforming to the dimensions seen in Desktop and iPhone (the width of the header, basically). This problem is consistent across every page on the site seen on Tablet; everything pushes right up against the edge of the screen. I think the simplest solution would be to disable mobile view on the tablet completely, but I don't know if there's a code for that. Perhaps there's a code to force the tablet view to keep all content within the width of the header? andykhouri.com; site is live and should be visible to everyone. Thanks for any help!

I managed to answer my own question but it wasn't very intuitive, so I'm sharing the solution here in case anyone else ever runs into it. If your grid spacing is messed up and the slider controls aren't helping, highlight the parameters next to the slider and then manually punch in the pixel count for your vertical and horizontal spacing and it'll force the proper formatting. Not sure if this is a glitch or if I messed up somewhere, but this worked.

I'm having some trouble with this topic, just slightly different. I've created a portfolio page with about 40 items on it, but the Vertical Spacing control is malfunctioning. When I set it to 1px, it separates the rows by far more. Check it out in the screenshot. I'm not using any custom code on this page, but I am using this in the Design > Custom CSS injection field: div#gridThumbs { max-width: 900px; } But when I remove that code, there's no change. Any ideas? Thanks!

Just want to say thanks so much for this! It was a live saver.

Thank you for this super-fast reply! it worked perfectly. Follow-up question, if that's alright; changing this code seems to disable the default mobile view. The default view is you see each portfolio entry stacked as a full-size square. With the code injection, which is present on my demo site now, the squares become tiny thumbnails in rows. Is there a simple way to preserve the default mobile view?

Hi! I'm trying to do this as well but it doesn't seem to be working. I'd like to be able to add up to 10 rows. I'm using the overlay option, so I changed the code per SamBoyle's note above, but still no change. Would someone mind taking a look? https://bugle-banjo-apfh.squarespace.com/ password: squarespacehelp