tazmeah

How about this? I have it set to animate for 2 seconds, but you can change that.
<script> // how many seconds do you want it to animate? var animateSeconds = 2; /* Do Not Edit Below Here */ function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; whenReady = function (readyFunc, actionFunc, options) { if (readyFunc()) { actionFunc.apply(this); } else { if (!options) options = {}; if (!options.current) options.current = 0; if (!options.max) options.max = 60000; if (!options.interval) options.interval = 500; if (options.current < options.max) { setTimeout(function () { options.current += options.interval; whenReady(readyFunc, actionFunc, options); }, options.interval); } else if (options.ontimeout) { options.ontimeout(); } } return true; }; whenReady( function () { return document.querySelectorAll("#block-yui_3_17_2_1_1608660323376_12967").length; }, function () { // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_8180"); var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967"); // save first number var projects = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967 h1"); var projectsNum = +projects.textContent; // save second number var clients = document.querySelector("#block-yui_3_17_2_1_1608660323376_14050 h1"); var clientsNum = +clients.textContent; // save third number var ongoing = document.querySelector("#block-yui_3_17_2_1_1608660323376_16106 h1"); var ongoingNum = +ongoing.textContent; // set all numbers to zero projects.textContent = clients.textContent = ongoing.textContent = 0; function animateNumbers() { if (isInViewport(spacerBar) && !window.numbersAnimated) { // animate the numbers back to their original. over X seconds. var curProjects = 0, curClients = 0, curOngoing = 0; var animating = setInterval(function(){ curProjects += projectsNum / (animateSeconds * 100); curClients += clientsNum / (animateSeconds * 100); curOngoing += ongoingNum / (animateSeconds * 100); projects.textContent = Math.floor(curProjects); clients.textContent = Math.floor(curClients); ongoing.textContent = Math.floor(curOngoing); }, 10); window.numbersAnimated = true; // turn off the interval after X seconds setTimeout(function(){ clearInterval(animating); // set the numbers to their original projects.textContent = projectsNum; clients.textContent = clientsNum; ongoing.textContent = ongoingNum; }, animateSeconds * 1000); } } // if page loads and numbers are visible animateNumbers(); // when scrolling window.addEventListener('scroll', animateNumbers); }, // action function { //this is only necessary if you need to do something on timeout. ontimeout: function () { console.log('*** Timing out ***'); } } //ontimeout // action function ); // whenReady </script>  
Screen Recording 2020-12-30 at 5.21.10 AM.mov

Hello, MeKenzie. It looks like the problem is that although you have a link below the painting, the controls for navigating to the previous and next painting in the gallery are on top of the link.
 
Maybe there is a way to pull the link forward and above the controls, but I can't see how to do that.

Barring solving that, I'd recommend a different solution.
Here is one that could work with your current approach. What if we disabled the previous and next clicking that happens on top of the lightboxed image, and instead wrote code that says, "If you click the image and it has a link underneath it, take us to wherever the link is supposed to go." That code would be this:
 
document.addEventListener( "click", function (e) { if ([...e.target.classList].includes("gallery-lightbox-control")) { e.preventDefault(); e.stopImmediatePropagation(); if (jQuery("figure[data-active='true']").find("a").length) { } window.open(jQuery("figure[data-active='true']").find("a").attr("href"), "_parent"); } }, true ); Also, about halfway down in the code where it says "_parent", that means to open the link in the current tab. To open in a new tab, change "_parent" to "_blank".
I hope this helps or that you all come up with a better solution.

How about this? I have it set to animate for 2 seconds, but you can change that.
<script> // how many seconds do you want it to animate? var animateSeconds = 2; /* Do Not Edit Below Here */ function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; whenReady = function (readyFunc, actionFunc, options) { if (readyFunc()) { actionFunc.apply(this); } else { if (!options) options = {}; if (!options.current) options.current = 0; if (!options.max) options.max = 60000; if (!options.interval) options.interval = 500; if (options.current < options.max) { setTimeout(function () { options.current += options.interval; whenReady(readyFunc, actionFunc, options); }, options.interval); } else if (options.ontimeout) { options.ontimeout(); } } return true; }; whenReady( function () { return document.querySelectorAll("#block-yui_3_17_2_1_1608660323376_12967").length; }, function () { // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_8180"); var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967"); // save first number var projects = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967 h1"); var projectsNum = +projects.textContent; // save second number var clients = document.querySelector("#block-yui_3_17_2_1_1608660323376_14050 h1"); var clientsNum = +clients.textContent; // save third number var ongoing = document.querySelector("#block-yui_3_17_2_1_1608660323376_16106 h1"); var ongoingNum = +ongoing.textContent; // set all numbers to zero projects.textContent = clients.textContent = ongoing.textContent = 0; function animateNumbers() { if (isInViewport(spacerBar) && !window.numbersAnimated) { // animate the numbers back to their original. over X seconds. var curProjects = 0, curClients = 0, curOngoing = 0; var animating = setInterval(function(){ curProjects += projectsNum / (animateSeconds * 100); curClients += clientsNum / (animateSeconds * 100); curOngoing += ongoingNum / (animateSeconds * 100); projects.textContent = Math.floor(curProjects); clients.textContent = Math.floor(curClients); ongoing.textContent = Math.floor(curOngoing); }, 10); window.numbersAnimated = true; // turn off the interval after X seconds setTimeout(function(){ clearInterval(animating); // set the numbers to their original projects.textContent = projectsNum; clients.textContent = clientsNum; ongoing.textContent = ongoingNum; }, animateSeconds * 1000); } } // if page loads and numbers are visible animateNumbers(); // when scrolling window.addEventListener('scroll', animateNumbers); }, // action function { //this is only necessary if you need to do something on timeout. ontimeout: function () { console.log('*** Timing out ***'); } } //ontimeout // action function ); // whenReady </script>  
Screen Recording 2020-12-30 at 5.21.10 AM.mov

This code should help. It is based on the guidance provided by @Fubeman1570048166
Anywhere on the page where you can insert a code block (Blog header code injection, site header or footer injection,...etc.) copy/paste the following.
<script> whenReady = function (readyFunc, actionFunc, options) { if (readyFunc()) { actionFunc.apply(this); } else { if (!options) options = {}; if (!options.current) options.current = 0; if (!options.max) options.max = 60000; if (!options.interval) options.interval = 500; if (options.current < options.max) { setTimeout(function () { options.current += options.interval; whenReady(readyFunc, actionFunc, options); }, options.interval); } else if (options.ontimeout) { options.ontimeout(); } } return true; }; whenReady( function () { return window.hasOwnProperty("Y"); }, function () { Y.UA.ios = 0; }, // action function { //this is only necessary if you need to do something on timeout. ontimeout: function () { console.log('*** Inline Mobile Player Timing out ***'); } } //ontimeout // action function ); // whenReady </script>  

Site URL: https://www.deathave.com/
i would like to add a file to the main directory.  
It will be a .json file.  Example  domain.com/thefile.json
I dont need a link to it.  I just need it to sit in the main directory.  
is it possible?  Thank you!

Please try this Custom CSS on that page:
/* code for fuller thumbnail titles */ .image-slide-title { white-space: normal; } You can replace the word normal with any of the following:
break-spaces inherit initial pre-line pre-wrap revert unset

What is the site url, the problem is site specific

Are you saying you want the Category names alphabetized: Category "A", Category "B", ....Category "G",

or are you saying you want the books within the categories alphabetized: Category "G" - Books "A", "B",..."Z", Category "C" - Books "A", "B",..."Z"

or are you saying alphabetize them both?

@tazmeah Worked perfectly - and your code makes total sense to me now that I see it. Thanks so much!

Very well explained.
I've updated your code. Please let me know if that solves your problem.
<!-- Noscript content for added SEO --> <noscript><a href="https://www.eventbrite.com/e/happy-hour-with-luke-elena-january-tickets-135561675621" rel="noopener noreferrer" target="_blank"></noscript> <!-- You can customize this button any way you like --> <button id="eventbrite-widget-modal-trigger-135561675621" class="sqs-block-button-element--medium sqs-block-button-element" type="button" style="border:none;">Buy Tickets</button> <noscript></a>Buy Tickets on Eventbrite</noscript> <script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script> <script type="text/javascript"> var exampleCallback = function() { console.log('Order complete!'); }; window.EBWidgets.createWidget({ widgetType: 'checkout', eventId: '135561675621', modal: true, modalTriggerElementId: 'eventbrite-widget-modal-trigger-135561675621', onOrderComplete: exampleCallback }); </script>  

Please try this Custom CSS on that page:
/* code for fuller thumbnail titles */ .image-slide-title { white-space: normal; } You can replace the word normal with any of the following:
break-spaces inherit initial pre-line pre-wrap revert unset

Very well explained.
I've updated your code. Please let me know if that solves your problem.
<!-- Noscript content for added SEO --> <noscript><a href="https://www.eventbrite.com/e/happy-hour-with-luke-elena-january-tickets-135561675621" rel="noopener noreferrer" target="_blank"></noscript> <!-- You can customize this button any way you like --> <button id="eventbrite-widget-modal-trigger-135561675621" class="sqs-block-button-element--medium sqs-block-button-element" type="button" style="border:none;">Buy Tickets</button> <noscript></a>Buy Tickets on Eventbrite</noscript> <script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script> <script type="text/javascript"> var exampleCallback = function() { console.log('Order complete!'); }; window.EBWidgets.createWidget({ widgetType: 'checkout', eventId: '135561675621', modal: true, modalTriggerElementId: 'eventbrite-widget-modal-trigger-135561675621', onOrderComplete: exampleCallback }); </script>  

This custom CSS might help you:
.sqs-block-html { margin: 10px; }  

The above code will add 10 pixels of margin to your desktop view also, so if you ONLY want it to affect the mobile version, try this instead. (Change 10 pixels if you want more or less.)
@media only screen and (max-width:640px) { .sqs-block-html { margin: 10px; } }  

No problem. You can do this without code. It's built into your dashboard.
In your dashboard, go to Pages, then click the + in your Main Navigation. Add a link.
Enter the phone number you want the link to display as, and for the address enter "tel:1234567890" but obviously change the telephone number. Repeat this process with the email address, but for its link, type "mailto:me@you.us", and again change the email to the appropriate address.
 

Yeah try to add it to code block on home page

I got a solution on this post, you can try on your site and see what we can improve here
How do I make the scroll down arrow on my homepage clickable and to scroll down to the section below? - Coding and Customization - Squarespace Forum

I see some pages on your site have very long content. You can consider adding a back to top button.
Also, 5 icons is not same line on tablet. If you want them same line, add this to Design > Custom CSS
/* tablet footer social */ @media screen and (max-width:900px) and (min-width:641px) { div#footerBlock .span-4:not(:first-child):not(:last-child) { width: 100%; } }

I snapped another shot of your website to make sure I understand what you're asking.
In the image below, the GREEN rectangle represents the padding. As shown it's 17px on all sides.

 
In this next image, I removed the padding on the bottom. Is that what you're trying to do?

If so, this custom CSS should remove the bottom padding:
 
.sqs-block-gallery { padding-bottom: 0 !important; }  

Got it to work by adding the code into the header. You are the man! searched everywhere online and you are the only one that knew what to do. Really appreciate it.

How about this? I have it set to animate for 2 seconds, but you can change that.
<script> // how many seconds do you want it to animate? var animateSeconds = 2; /* Do Not Edit Below Here */ function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; whenReady = function (readyFunc, actionFunc, options) { if (readyFunc()) { actionFunc.apply(this); } else { if (!options) options = {}; if (!options.current) options.current = 0; if (!options.max) options.max = 60000; if (!options.interval) options.interval = 500; if (options.current < options.max) { setTimeout(function () { options.current += options.interval; whenReady(readyFunc, actionFunc, options); }, options.interval); } else if (options.ontimeout) { options.ontimeout(); } } return true; }; whenReady( function () { return document.querySelectorAll("#block-yui_3_17_2_1_1608660323376_12967").length; }, function () { // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_8180"); var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967"); // save first number var projects = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967 h1"); var projectsNum = +projects.textContent; // save second number var clients = document.querySelector("#block-yui_3_17_2_1_1608660323376_14050 h1"); var clientsNum = +clients.textContent; // save third number var ongoing = document.querySelector("#block-yui_3_17_2_1_1608660323376_16106 h1"); var ongoingNum = +ongoing.textContent; // set all numbers to zero projects.textContent = clients.textContent = ongoing.textContent = 0; function animateNumbers() { if (isInViewport(spacerBar) && !window.numbersAnimated) { // animate the numbers back to their original. over X seconds. var curProjects = 0, curClients = 0, curOngoing = 0; var animating = setInterval(function(){ curProjects += projectsNum / (animateSeconds * 100); curClients += clientsNum / (animateSeconds * 100); curOngoing += ongoingNum / (animateSeconds * 100); projects.textContent = Math.floor(curProjects); clients.textContent = Math.floor(curClients); ongoing.textContent = Math.floor(curOngoing); }, 10); window.numbersAnimated = true; // turn off the interval after X seconds setTimeout(function(){ clearInterval(animating); // set the numbers to their original projects.textContent = projectsNum; clients.textContent = clientsNum; ongoing.textContent = ongoingNum; }, animateSeconds * 1000); } } // if page loads and numbers are visible animateNumbers(); // when scrolling window.addEventListener('scroll', animateNumbers); }, // action function { //this is only necessary if you need to do something on timeout. ontimeout: function () { console.log('*** Timing out ***'); } } //ontimeout // action function ); // whenReady </script>  
Screen Recording 2020-12-30 at 5.21.10 AM.mov

I provided a guide for changing 0.00 to a word here:
https://sf.digital/squarespace-solutions/how-can-i-make-some-prices-poa-on-squarespace-71
As explained in the guide, this has been designed for products that do not have variants.

If would be helpful if you can show your current site url

Is this dropdown going to be on the nav bar? You would simply add a folder, and a click will take them there. If you want a fast scroll down the page to a particular section then anchor links is the way to go. 
Folder: 
Anchor links: 
 

I snapped another shot of your website to make sure I understand what you're asking.
In the image below, the GREEN rectangle represents the padding. As shown it's 17px on all sides.

 
In this next image, I removed the padding on the bottom. Is that what you're trying to do?

If so, this custom CSS should remove the bottom padding:
 
.sqs-block-gallery { padding-bottom: 0 !important; }