Issue with Site Not Loading on Mobile Devices

I've recently encountered a problem where my Squarespace site isn't loading correctly on mobile devices. The site works fine on desktop, but when accessing it on a mobile browser, the site either fails to load or has significant display issues. I've checked for common issues like browser cache and DNS settings but haven't found a solution. Below is all my custom css code. I am using the squarekicker plugin. Let me know if you have any ideas, thanks.

// CUSTOM FONT

@font-face {
font-family: "termina", sans-serif;
font-weight: 400;
font-style: normal;
}

h3 {

font-family: 'termina';}

h4 {

font-family: 'termina';}

// CUSTOM FONT 2

@font-face {

    font-family: 'grotesk';

       src: url('https://static1.squarespace.com/static/65e39894f064df09c14d7e0c/t/65e63200ac90ab6e1a663e7b/1709584896990/PPRightGrotesk-TightMedium.ttf');

  }

h1 {

font-family: 'grotesk';}

h2 {

font-family: 'grotesk';}

.sqsrte-large {

font-family: 'grotesk';}

.header-nav *, nav.header-menu-nav-list * {
    font-family: inter;
  font-weight: bold;
}

//custom font 3
@font-face {
font-family: 'inter';
src: url('https://static1.squarespace.com/static/65e39894f064df09c14d7e0c/t/65e4ff7f3eb087584d36b431/1709506431563/Inter-VariableFont_slnt%2Cwght.ttfhttps://static1.squarespace.com/static/65e39894f064df09c14d7e0c/t/65e50d803eb087584d3a356c/1709510016927/Inter-Regular.ttf');
}

/* Reorder Sections on Mobile */
@media screen and (max-width: 640px) {
  #collection-65e4a413923f48577ffc5e97 #page .sections {
    display: flex;
    flex-direction: column;
    .page-section:nth-of-type(1) {
      order: 1;
    }
    .page-section:nth-of-type(2) {
      order: 2;
    }
    .page-section:nth-of-type(3) {
      order: 3;
    }
    .page-section:nth-of-type(4) {
      order: 5;
    }
    .page-section:nth-of-type(5) {
      order: 4;
    }
     .page-section:nth-of-type(6) {
      order: 6;
    }
    .page-section:nth-of-type(7) {
      order: 7;
    }
  }
}
/* Reorder Sections on Mobile */
@media screen and (max-width: 640px) {
  #collection-65e4baa2702d3248f604d49d
  #page .sections {
    display: flex;
    flex-direction: column;
    .page-section:nth-of-type(1) {
      order: 1;
    }
    .page-section:nth-of-type(2) {
      order: 2;
    }
    .page-section:nth-of-type(3) {
      order: 3;
    }
    .page-section:nth-of-type(4) {
      order: 4;
    }
    .page-section:nth-of-type(5) {
      order: 5;
    }
     .page-section:nth-of-type(6) {
      order: 6;
    }
    .page-section:nth-of-type(7) {
      order: 7;
    }
     .page-section:nth-of-type(8) {
      order: 9;
    }
     .page-section:nth-of-type(9) {
      order: 8;
    }
    .page-section:nth-of-type(10) {
      order: 10;
    }
     .page-section:nth-of-type(11) {
      order: 11;
    }
     .page-section:nth-of-type(12) {
      order: 12;
    }
    
  }
}

.form-wrapper .field-list .title {
  font-family: Inter;
  font-size: 10px;
}

What is your site address? We might be able to spot something by looking at it. 

I'm having the same issue.  Also, it says it is not a secure connection when I try to access from my Android.

Having the same problem. My website is secure on laptop browser with wifi, but comes up as 'connection not private' on phone when using data. Any solutions?

Hello,

Having trouble with the security for my website. It works fine on browsers when the device (laptop or phone) is connected to wifi. However when using phone data on my android or hotspot on laptop the message comes up with 'Your Connection is not private'.  

Any ideas why this is happening?

Cheers!