Jump to content

Gallery Scroll broken + Mobile Version of website is not responsive + Pieces of the website look different on Desktop & Laptop

Recommended Posts

I am having a couple of issues.

1.) I added this code to my homepage yesterday. the auto-scroll worked great. When I looked at the website this morning, it's now not working. I don't understand what happened. Does anyone have any idea?

<script>
    /**
    *  Gallery Section Auto Scroller
    **/
  (function () {
    setAutoScroll({
      gallery: 1,
      direction: 1,
      timing: 3000,
    });

    /*
    * Copy and paste the above code
    * to target more auto-scrolling
    * sections
    **/

    /** gallery
    * gallery section order on the page. Ex:
    * 1 = the first gallery section on a page,
    * 2 = the second gallery section on a page
    **/

    /** direction
    * direction the gallery should go in.
    * 1 = backwards,
    * 2 = forwards
    **/

    /** timing
    * timing between each slide, in milliseconds. Ex:
    * 2000 = 2 seconds
    **/

    function setAutoScroll(settings) {
      function init() {
        let section = document.querySelectorAll(".page-section.gallery-section")[settings.gallery - 1];

        function clickArrow() {
          if (section && !document.querySelector("html.sqs-modal-lightbox-open") && !document.hidden && !document.querySelector("body.sqs-edit-mode")) {
            let arrow = section.querySelectorAll(".gallery-reel-control .gallery-reel-control-btn")[settings.direction - 1];
            if (arrow) arrow.click();
          }
        }

        window.setInterval(clickArrow, settings.timing);
      }

      window.addEventListener("DOMContentLoaded", init);
    }
  })();

  <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BC9E1K4BVJ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-BC9E1K4BVJ');
</script>

</script>

 

2.) I can't figure out how to make my website tablet and mobile responsive. Any help with this would be greatly appreciated.

3.) One portion of the home page looks slightly different on a desktop than on a laptop. It's minor, but it's enough that it is noticeable and needs to be fixed. I have been messing around with all three of these issues all morning and can't seem to find a fix to any of them that works.

Laptop.jpg

Desktop.jpg

Link to comment
  • Replies 1
  • Views 152
  • Created
  • Last Reply

Popular Days

Posted Images

UPDATE: I fixed the auto scroll script. It looks like I accidentally deleted the CSS it needed at some point last night before bed. I corrected the issue by adding this line of code. 

<style>
.gallery-reel {
  height: clamp(75px, 25vw, 200px) !important;
  padding: 17px 0px !important;
}
</style>

 

Still having issues with the below.

 

2.) I can't figure out how to make my website tablet and mobile responsive. Any help with this would be greatly appreciated.

3.) One portion of the home page looks slightly different on a desktop than on a laptop. It's minor, but it's enough that it is noticeable and needs to be fixed. I have been messing around with all three of these issues all morning and can't seem to find a fix to any of them that works.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.