JonnyIlsley

I have actually understood what needs to happen now, I have used nth-childs to target the correct sections. My final question is can you set an offset in the ".offset{}" field? It feels like you should be able to but I am not seeing any effect. Thanks

Hi @tuanphan I am looking to achieve the same thing. I would like to use the code to add a scroll button, ideally with my own svg. I would like the scroll button to be in the second section of my page. What would need to be changed in the image you posted to make this happen? Thanks

When i tried the code on my site it didn't seem to work. I have tried it within the header code injection and also on a specific page - settings - advanced - header code. I was unsure if it was something on my site that was stopping it or if it was the fact that Scrollify no longer works for updated versions of Squarespace.

@tuanphan Was this ever solved? Does Scrollify still work on Squarespace 7.1? I have seen codes like the below floating around in forums but they don't seem to work for me. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script> <script> $(function() { $.scrollify({ section: ".page-section", }); }); </script> @Ziggy, I have seen you were answering forum questions with the above code. Do you know anything about it not working now?

I am looking to hide multiple sections on my website at different screensizes. I had an idea in which you place a code block onto a section. The code block can then either: A) contain a code that hides the section it sits within on specific screensizes. B) The code block contains some sort of note such as "Tablet-Screensize" and then we wrtie some CSS to hide any sections that have a code block on them with those words within the code block. Is something like this possible? Thanks

Please tell me someone has solved this! I am looking to use an Image block with the setting "Fit". I need to use Fit as the photo needs to retain its aspect ratio and not be cropped. However, when you use this, extra space is added around the image when you resize your browser window. I think this is a Fluid Engine problem. (The pesky Fluid Engine Spacing Issue we all know about) This means if you are trying to do something like the below: IMAGE TEXT As you resize the browser, the image moves "further away" from the text as more empty space is added. Is there any way to solve this other than using classic editor? Seems that classic editor is the only solution at the moment. Any advice would be greatly appreciated. Tagging @tuanphan & @Ziggy as I have seen them in similar forums previously discussing similar issues.

Yes please, if you have the code that would be great. Thanks

Sorry, yeah i d id solve this issue. However, do you know if this is possible: Out of interest, is there not a way that you can set the squarespace mobile margin for the whole site?

A final note. I also noticed that when it comes to using this on my homepage where I had a plugin that was creating sliding images, this part of the code didn't seem to be working: "#page .page-section:first-child.section-height--medium" I think its because there's multiple sections that make up the "first section" if you will. So, instead, I have changed that part of the code to just use section IDs to target those sections and it seems to work. Rewritten code: <style> [data-section-id="63501029d0c1afc30f3ee79f"], [data-section-id="63501041413276638cb717f2"], [data-section-id="6350102f76836d87c08c1cff"], [data-section-id="6350103420fec952c33006fe"], [data-section-id="6350103650e9e5c183af3066"], [data-section-id="6350103944b3b8cbe1cbe50b"], [data-section-id="6350103ce0d069db53bcd697"], [data-section-id="6350103f5caa97d1d73eb016"], [data-section-id="6369120ea9268a1bdad16a13"], [data-section-id="6422c32efe8af81431569d20"], [data-section-id="6422c332c668da0fa7fba3a2"] { min-height: 83svh !important; max-height: 83svh !important; } section[data-section-id="63d25b473ecfcf04206ec6bd"] { min-height: 17svh !important; max-height: 17svh !important; } </style>

Hey @creedon After playing around I seem to have built something that is working exactly how I would like it. I thought I would share it in here so other people can use it, see if it makes sense to you that it hopefully shouldn't cause errors. Page Header Injection Code below: <style> #page .page-section:first-child.section-height--medium { min-height: 83svh !important; max-height: 83svh !important; } section[data-section-id="6352d6d11a264cad7f4e2927"] { min-height: 17svh !important; max-height: 17svh !important; } </style> CSS code: //Title Bar Section - Content Wrapper Padding// section[data-section-id="6352d6d11a264cad7f4e2927"] { .content-wrapper { padding-top: 0 !important; padding-bottom: 0 !important; } } Explanation: I am using this code to set the custom heights that way. I have set the section height on my banner image to be "Medium". I then set the section height of my title section below it to my desired custom height, "17" Then in the page header injection code, I set the min and max values of height to the custom height i want my banner image. In this case 83svh. I believe this means that the section height will always be 83svh which is exactly what we want. Then below this, I have added the section ID for that page's title section. I have set min and max heights of 17svh to match my initial custom height of 17. This completed the 100svh viewport total. 83svh + 17svh = full viewport using two sections. Then the final part of this to make it work was to remove the content-wrapper for my title bar section. I did this in CSS using the code above. The code is simply targeting the title section's section ID and setting the padding of the content-wrapper to 0px for the top and bottom. This all seems to be working and behaving exactly how I would like it to. Any thoughts or suggestions on this would be great because as I say, I am very new to this still. Thanks very much, Jon

So this seems to get svh working however I was having a play around with it to understand what its doing and noticed a few things. 1) The code targets "section-height--large". This means that only sections set to "Large" are effected. This is good however is there a way to set a custom height here? I noticed that even if i set my section height to "100" - which seems like its the same as clicking "Large" the code doesn't pick it up as it is only targeting "Large". Is there a way where the code could target "section-height--custom" and then set a custom value of say 85? If this "section-height--custom" is able to be targeted then i think I have a perfect solution for what I'm after. 2) More curiosity to help my learning. Why are the other ":not" values included in that code? The code seems to work without them, so i just wanted to understand what they are being used for. 3) The video also mentions using a fall back code of just "height: 100vh" and placing it before the min-height: 100svh value. This should work if I just add this in right? 4) Finally, am I correct in saying I could add a regular CCS media query in between the <style> tags to make this only happen on mobile if I needed that use case? Thank you very much for your help so far as this is something that I have been looking into for a while.

Ahh, I see, that makes sense with the JavaScript solution. Hypothetically, how would you make svh work with a 100vh section? If you could help me with that, that would be amazing. I will set my Contact to have a 100vh section height now. I will use this page to test. https://hexahedron-soybean-zdl8.squarespace.com/contact If I can get it to work with 100vh section, I might actually have a think about swapping my site layout so that it is using a 100vh section at the start of a page.

Would you be able to explain the JavaScript 1px scroll down technique? I am fairly new to website building so learning as I go. What would this technique be and how would I implement it? Thanks, Jon

To stop this I just realised this was set to Full and not Inset. Changing it to Inset, sorted this behaviour.

Also, @tuanphan, I just noticed that when I go to a larger screen width on say a large widescreen monitor, all my content sits within the max page width that I have set on Squarespace, however, this related Projects section goes wider than the max page width. Is there a way to stop this?