tazmeah

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.

The image you are using for your logo (Yellowbox COLLECTIVE) is a square one. Can you replace it with a cropped version to make it more rectangular –  wider than tall? Once re-uploaded as a rectangle, I think that will solve your problem.

@SpeckleDigital I'm assuming you have this solved. When I visited the site, I see a hamburger menu that goes from 2 black lines to 2 orange ones on hover, and arrows which grow in size as I hover over its menu items.

Try this.

https://developers.squarespace.com/

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>

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?

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:

1. break-spaces
2. inherit
3. initial
4. pre-line
5. pre-wrap
6. revert
7. unset

Can you post a link so we can better understand your problem?

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;
  }
}

This custom CSS might help you:

.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.

sorry. If you're using it as Code Injection, remove the first and last lines. Thanks.

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>

Can you upload a screenshot showing the space you're trying to remove?

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;
}

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>

@vicorstan Consider an iPhone. Did you know that you can touch the very top of the browser window and go back to the top of any webpage from any location on the page? That means there are virtually an infinite # of "Back to top" buttons. If you're in the middle of the page, it's convenient to shoot back to the top without going all the way down first. But it's your site. Keep in mind you won't get much help with a bad attitude. I'm not looking for help; you are.

Using what neeklamy said, you can select Content Manager, select the blog page, select Blog Settings, then choose the Advanced tab. Scroll to the bottom and you'll see Post Blog Code Injection. Paste Back to top and it will put the words "Back to top" as a link at the end of every blog post/excerpt.

What I did on mine was removed all the time using CSS, then manually added time to the ones I wanted.

<style>
.event-time-12hr {display: none !important}
</style>

Then, for the ones that you want time to be shown, put it in the title. Here’s an example:

Title Goes Here <br> 10:10AM

The HTML tag <br> is a break which puts the time on a line underneath the Title.