JonnyIlsley

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?

Yes, I am referring to the search/toolbar that safari gives. Through my limited knowledge and research, it seems that this is exactly what I am trying to achieve in this video. However, I am not sure how/if you can implement it on a squarespace site. This seems to be implementing svh for a measurement of height. https://www.youtube.com/watch?v=pOuE9sgK9jY The video shows how to acheive this effect on one section at a full height of 100vh. They add the code to make it responsive to mobile browser toolbars using a new measurement unit of 100 svh. (Can also use dvh or lvh for other effects) If i could get this working that would be amazing. I feel my site is slightly different however because I am actually using two sections to make up the entire 100vh. Image section: 83 vh + Title section (This is the white section below with blue text) = 17vh = Total viewport = 100vh. This works perfectly on desktop however when it comes to mobile, the heights are being measured as if the toolbar on mobile browsers is collapsed. This video seems to show the solution however as I mention, I'm not sure how to or if it can even be implemented. Many thanks in advance, Jon

Ok great, thank you! it seemed to work. Out of interest, is there not a way that you can set the squarespace mobile margin for the whole site?

Hi @tuanphan If I needed this to occur to all my Related Projects sections (there are lots and lots) should I just remove the section ID?

Hey, Does anyone know how to deal with the Safari iPhone viewport issue? My site is set up so that on the initial load, you see a big image, (section height= 80) and then a title section below (section height = 20). This is working perfectly on a desktop to sum up to 100vh for desktop. However, when I load my site on iPhone, using Safari, the Safari search bar, sits over part of the title section. Is there any way to make the gap between the safari search bar and the top of the page be the "100vh" viewport and not the bottom of my screen? I hope this makes sense. Site: https://hexahedron-soybean-zdl8.squarespace.com/ Password: testing123 Thanks, Jon

This is the page: https://hexahedron-soybean-zdl8.squarespace.com/commercial/summit-housepassword: testing123Its the bit that says Related Projects down the bottom.

This is the page: https://hexahedron-soybean-zdl8.squarespace.com/commercial/summit-house password: testing123 Its the bit that says Related Projects down the bottom.

Worked perfectly, thank you!

Ok great, thank you for your help!

Hi @Ziggy Thanks for your reply. I am learning CSS as I go. I just tried this and it worked perfectly. Thank you very much! Am I correct in saying that because I have created the class ".scroll-down", that is why I am able to then target that within my CSS? Just trying to understand things more for the future. Thanks, Jon

Hi, Is it possible to set media queries in HTML within a code block. I currently have multiple code blocks across my sight (they all have the same code). I am using these to show an animated scroll down arrow on different pages. This looks good on desktop however I want to hide the code block when it goes to screen sizes below 1000px. Is there a way to add a media query, like you would in CSS, to the HTML code so that I don't have to target each code block across my website in a massive string of CSS. The code for my animated scroll arrow is below: <div class="scroll-down"></div> <style> .scroll-down { position: absolute; left: 50%; bottom: -2px; display: block; text-align: center; font-size: 100px; z-index: 100; text-decoration: none; text-shadow: 0; width: 20px; height: 20px; border-bottom: 2px solid #2B6777; border-right: 2px solid #2B6777; z-index: 9; left: calc(100% - 28px); transform: translate(-50%, 0%) rotate(45eg); animation: bouncey_move_down 3s infinite; } /*animated scroll arrow animation*/ @keyframes bouncey_move_down { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(45deg); } 40% { transform: translateY(-20px) rotate(45deg); } 60% { transform: translateY(-10px) rotate(45deg); } } </style> Thanks, Jon

Hi @tuanphan, Was this ever solved? I am looking to make auto layout list sections across my site have a site margin of 4vw on mobile to match the rest of my site on mobile. The section is using Fluid Engine as well. For my site, I am using a site margin = 4vw. Everything seems to work well on desktop however when you get to mobile, If you use an auto layout section, it seems to not match the site margin. I need to make this happen to all auto list sections as I have multiple across my site. Thanks in advance, Jon

@tuanphan Sorry, I have been asked by the site owner to change this section so now it is using a list section. Is there a way to stop the animation when it comes in but keep the ability to scroll on these sections? The section id is = section[data-section-id="643ebedc7cece165a63fe33f"] I am just trying this out here but will need to apply this to all my related project pages as mentioned above. I think I just need to change the first part of this code. Change the .summary-item-list part? : .summary-item-list * { transform: unset !important; opacity: 1 !important; transition-delay: unset !important; transition: unset !important; }