Do I Have A Bad Code Somewhere On My Site? And Can I Make All Images On 1 Page Have An Effect With Hover?

So I am extremely new to coding, and am not sure if there is an issue with a code I put, or something else is entirely wrong, but my website seems to have this weird jitter/lag on both desktop and mobile. It's almost like when you scroll down, the page is trying to drag you back up or something. I was thinking that it had to do with the site animation, but I'm not sure that's it either. The whole site is not smooth.

Here are all of my current codes I have for the site. Maybe one is breaking it somehow? Also, towards the bottom, each image block has an effect when I hover, but is there a way to apply that to the whole page without typing the code for each image block?

My site password is 2926

CSS:

//smooth scroll 

html {scroll-behavior: smooth;}
.anchor-link{
  scroll-margin: 100px;
}

// images drop shadow
.image-block {
  filter: drop-shadow(5px 5px 8px #000000);
}

/*HOW TO REDUCE THE HEIGHT OF THE GALLERY SLIDESHOW REEL ON MOBILE IN SQUARESPACE (7.1)*/
@media screen and (max-width: 767px) {
  .gallery-reel {
    height: 30vh !important;
  }
}

//slideshow simple mobile
@media screen and (max-width: 767px) {
  .gallery-slideshow-item-wrapper, .gallery-slideshow-item img {
    height: 30vh !important;
  }
}

//package details name on gallery
@media only screen and (min-width: 768px) {
  #collection-647436e4392efb65901e487d {
    #page .page-section:nth-of-type(4) { /*second second on the left*/
      width: 0%;
      min-height: -40vh;
      align-items: center;
      float: left;
    }
    #page .page-section:nth-of-type(5) { /*third section on the right*/
      width: 100%;
      min-height: 80vh;
      align-items: center;
    }
  }
}

SECTIONID {
  padding: 12vh 0; //increase/decrease/remove as you like
}
//
  .gallery-reel-item-wrapper {
    box-sizing: border-box;
    border: YOUR BORDER SETTINGS HERE;
    transform: scale(.9); //any value less than 1
    transition: transform .3s linear; //adjust timings
  }
//full-sized focus tile
  .gallery-reel-item[data-active="true"] .gallery-reel-item-wrapper {
    transform: scale(1);
  }
.gallery {
  filter: drop-shadow(5px 5px 8px #000000);
}

@media only screen and (min-width: 768px) {
  #collection-647436e4392efb65901e487d {
    #page .page-section:nth-of-type(6) { /*second second on the left*/
      width: 0%;
      min-height: 00vh;
      align-items: center;
      float: left;
    }
    #page .page-section:nth-of-type(7) { /*third section on the right*/
      width: 100%;
      min-height: 80vh;
      align-items: center;
    }
  }
}

@media only screen and (min-width: 768px) {
  #collection-647436e4392efb65901e487d {
    #page .page-section:nth-of-type(8) { /*second second on the left*/
      width: 0%;
      min-height: 00vh;
      align-items: center;
      float: left;
    }
    #page .page-section:nth-of-type(9) { /*third section on the right*/
      width: 100%;
      min-height: 80vh;
      align-items: center;
    }
  }
}

@media only screen and (min-width: 768px) {
  #collection-647436e4392efb65901e487d {
    #page .page-section:nth-of-type(10) { /*second second on the left*/
      width: 0%;
      min-height: 00vh;
      align-items: center;
      float: left;
    }
    #page .page-section:nth-of-type(11) { /*third section on the right*/
      width: 100%;
      min-height: 80vh;
      align-items: center;
    }
  }
}

SECTIONID {
  padding: 12vh 0; //increase/decrease/remove as you like
}
//
  .user-items-list-carousel__slideshow-holder {
    box-sizing: border-box;
    border: YOUR BORDER SETTINGS HERE;
    transform: scale(.9); //any value less than 1
    transition: transform .3s linear; //adjust timings
  }
//full-sized focus tile
  .user-items-list-carousel [data-active="true"] .user-items-list-carousel{
    transform: scale(1);
  }
.user-items-list-carousel {
  filter: drop-shadow(5px 5px 8px #000000);
}

//text block gradient
#block-a75a4989fe8125d0d71f {
background-color: transparent!important;
 background: #FFE5EA;
background: -webkit-linear-gradient(to top, #FFFFFF, #FFE5EA);background: linear-gradient(to top, #FFFFFF, #FFE5EA);
}

// Auto Carousel List - Gradient Card Background //

.user-items-list-carousel .list-item { 
  background: linear-gradient(to bottom, #FFFFFF, #FFE5EA);
}

//drop down menu full width
.header-nav .header-nav-item--folder .header-nav-folder-content{
 width: 100vw!important;
 position:fixed;
 background: linear-gradient(to bottom, #FFFFFF, #FFFFFF,#FFE5EA)!important;
 border-top: 0px solid #000;
 border-bottom: 1px solid #000;
}
.header-nav-folder-content{
 display: flex;
 justify-content: center;
}
.header-nav-folder-item {
 margin-left: 1rem;
 margin-right: 1rem
}
.header-nav-folder-content a:hover {
 font-weight:bold
}

//header gradient on drop down
header#header.shrink {
    background-image: linear-gradient(to top, #FFFFFF,#FFFFFF,#FFE5EA) !important;
    background-color: solid !important;border-top: 1px solid #000;border-bottom: 1px solid #000;
}

// Mobile Menu Background //

.header-menu-bg {
background-color: #000000;
background: linear-gradient(to bottom, #FFFFFF,#FFFFFF,#FFE5EA, #FFE5EA,);
}

//mobile menu hover
.header-menu-nav-item a:hover {font-style: italic
  !important;
}

//mobile menu logo
[data-folder="root"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/646ee9e3f11e9d11d2e5552b/t/64b615d81f20cf3019c17b23/1689654745510/PerfectCaptureBoothLogoWithWords.pnghttps://static1.squarespace.com/static/646ee9e3f11e9d11d2e5552b/t/64b615d81f20cf3019c17b23/1689654745510/PerfectCaptureBoothLogoWithWords.png0px;);
    display: block;
    width: 250px;
    height: 250px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    margin: 0 auto ;
    position: relative;
    bottom: -32px;
  filter: drop-shadow(5px 5px 8px #000000);
  }

/* link hover change */

section a:hover {font-weight: bold;     font-style: italic; }

//gallery hover images
#block-b3ca1c9d809ac10bb0f1:hover  {
filter: opacity(.8);
transition: 2s
}
#block-e9a5d8abd68703f27677:hover  {
filter: opacity(.8);
transition: 2s
}
#block-3ba6f3bdfdce00270dbe:hover  {
filter: opacity(.8);
transition: 2s
}
#block-e2bcd782fda599235739:hover  {
filter: opacity(.8);
transition: 2s
}
#block-6c0bd96adb3732e33198:hover  {
filter: opacity(.8);
transition: 2s
}
#block-9f40f450ea6bcd2d0c99:hover  {
filter: opacity(.8);
transition: 2s
}

Does the behaviour of the website improve when you temporarily remove all of the code and CSS?

I can't see any glaring errors in the CSS but there are a number of odd lines of code like these which shouldn't be in your CSS:

border: YOUR BORDER SETTINGS HERE;

SECTIONID {
  padding: 12vh 0; //increase/decrease/remove as you like
}

But I wouldn't expect these issues to cause the errors you describe.

Can you share your website URL?

I've tried temporarily removing them, but it doesn't seem to make much of a difference. 
Hmm I should definitely remove that piece of code there

My website is perfectcapturebooth.squarespace.com

I'm no longer seeing the gittering I was getting on your website.

Hmm that's weird, I'm not seeing it anymore on my end, but it was super bad all throughout the day. 
Since I posted this, all that I've done was add a few more pages, and also delete some images that were unused from the asset Library. 

Haven't touched the coding or anything.

Maybe it was the asset library? Though I don't even have that many images compared to other people's websites.

I'm really not too sure, but we can come back to this if you see any problems in the future.

Hey Ziggy, so since the last time you checked, the site was running extremely well. But as of earlier today, I decided to input a header injection code to hide certain menu tabs, in order to help my site become bi-lingual. 

Basically, across all the pages, I put a variation of this code 

 

<style>
  #header .header-nav-item:nth-child(1){
    display:none
  }
  #header .header-nav-item:nth-child(4){
    display:none
  }
</style>

<style>
    @media screen and (max-width:1511px){
      #header .header-menu-nav-item:nth-child(1){
        display:none
      }
      #header .header-menu-nav-item:nth-child(4){
        display:none
      }
</style>

Do you think that this is what's causing the site to slow down? It's only this code in that page header injection section. And the rest of the code mentioned above in my previous post has remained the same.

I'm thinking maybe there's too much code for the site?

It shouldn't be too much code. Slow loading is more likely from errors. 

Have you pasted the code in twice or do you actually have two sets of <style> with duplicate content in each page?

So weird, it seems to come and go. Now it's gone again, But i can confirm that there is no double code on my site or anywhere. 
I was starting to think it was an issue with my PC, but while the issue was occurring, I drove to my gf's house, where I continued to experience the same issue on her MAC. I went to sleep, and woke up to it running perfectly fine again.

Not sure what the issue is here.

With that said, the only code that I feel may be incorrectly input onto my site, is the code that creates a hover effect when I scroll over an image on a certain page. 

I currently have it coded as 

//gallery hover images
#block-b3ca1c9d809ac10bb0f1:hover  {
filter: opacity(.8);
transition: 2s
}
#block-e9a5d8abd68703f27677:hover  {
filter: opacity(.8);
transition: 2s
}
#block-3ba6f3bdfdce00270dbe:hover  {
filter: opacity(.8);
transition: 2s
}
#block-e2bcd782fda599235739:hover  {
filter: opacity(.8);
transition: 2s
}
#block-6c0bd96adb3732e33198:hover  {
filter: opacity(.8);
transition: 2s
}
#block-9f40f450ea6bcd2d0c99:hover  {
filter: opacity(.8);
transition: 2s
}

Which is by inputting the code on each individual gallery image. Is there a way to apply this to each image block without having to separately code each one?

What page is the gallery on?

I have it on two pages.
"gallery" 

and "galeria" on the spanish version of the site once you click "espanol"

Ah! Sorry dude, I think I just figured it out.

I went ahead and got the collection ID, then put it in front like this

#collection-64ae2db8c985285b706efd61
.image-block:hover {
filter: opacity(.8);
transition: 2s;
}

But overall, I don't feel I am correctly coding the "transition" part, as it seems to do nothing

Edit: used the Section ID instead, since the collection ID was causing the footer image to have the hover effect

//gallery hover images
section[data-section-id="64ae2eb591f68f5e8f7ec9fa"]
.image-block:hover {
filter: opacity(.8);
transition: 2s;
}

Last question Ziggy, 

So I have the site coded so I can have both english and spanish versions. For the footer, I basically had to duplicate my footer, then translate it in spanish. And use a code to hide one version on certain pages.

So in edit mode, I see, Footer 1 on top (english) and footer 2 right under it (bottom)

In CSS I did :

//Hide Footers
body:not(.sqs-edit-mode-active) section[data-section-id="646ee9e4f11e9d11d2e55545"],
body:not(.sqs-edit-mode-active)
section[data-section-id="64bf16aae1b6c42949e664e2"]{
    display:none;
}

and on the spanish pages, I used the header page injection and put:

 

<style>
  /* Hide All Footer Sections*/
  footer .page-section {
    display: none;
  }

  /*Show Footer Section*/
  section[data-section-id="646ee9e4f11e9d11d2e55545"],
section[data-section-id="64bf16aae1b6c42949e664e2"] {
    display: flex !important;
  }
</style>

I did this to hide the first footer, aka the English one. Then to show the spanish version

But when i do this, the spanish footer on certain pages, leaves a white space under the dividers. It only does this on  4 pages. 

I noticed that this correlates with the fact that Footer 2 is placed under Footer 1. Because when I swap their positions, Footer 1 has this white space on the same english version of those pages

Hope this makes sense. I attached a picture Of what I see. 

Any way to fix this?
 

Genius man! I went with the third long shot option lol. 

I added the same image + divider in between the two footers, with the same spacing. Then hid it throughout the site. Now the footer looks perfect all throughout the Spanish version as well!

Thanks for all the help dude! Can finally say my website is done after like 3 months and practically learning to code haha. Appreciate the help!!

1 hour ago, PerfectCaptureBooth said:

Thanks for all the help dude! Can finally say my website is done after like 3 months and practically learning to code haha. Appreciate the help!!

Nice one, glad that worked!

Hey man! Just when I thought I was done with the site, another thing has occurred. It's all still the same, PerfectCaptureBooth.com and 2926 is the password

But I went ahead and added a page in the beginning of the site, where people can select their language right away. On desktop it looks fine, but on mobile, there is this huge white space on the bottom of the page. It's not a section, and it's not anything that I can even code as far as I can tell. Could you please give it a look bro? I'd like to remove that huge random white section completely 

3 hours ago, PerfectCaptureBooth said:

I'd like to remove that huge random white section completely 

It's not something "removable" since it's just blank space that you haven't filled. i.e. you can't remove a hole you have to fill the hole. You'll need to make the section height 100vh if you don't want blank space at the bottom. It's not just visible on mobile, it's on desktop as well:

Ah ok that makes sense. I was thinking that was the issue, as there was no code anywhere on the ID finder. So it's making space appear to account for screens that may not be filled with the amount of data that I applied.

Lastly, throughout the site, all of my buttons have a black circle around them. But for some reason, the buttons on this page won't apply that black circle. Is there a coding issue for this? Or am I doing something wrong in the style settings?

Edit : The buttons are where it says "English" and "Espanol"

4 minutes ago, PerfectCaptureBooth said:

the buttons on this page won't apply that black circle

You either have the background and border set to transparent and zero in the settings for that section color theme, or you've done this in Custom CSS.

Hmmm. This is the code I have applied specifically to that page. The top portion to hide the header and footer. Then the rest to apply one consistent image as the full page's background

 

<style>
  /* Hide All Footer Sections*/
  footer, header{
  display: none !important;
 }
}
  @media only screen and (max-width: 768px) {
  footer {
    display: none !important;
  }
}

.section-border{opacity:0!important} 
  
  /* Add the image as a background*/
#page{
background-image:url(https://static1.squarespace.com/static/646ee9e3f11e9d11d2e5552b/t/64cb205510b341420b7765dd/1691033686242/Pink+4.png);
background-size: cover}

/* Make the page section backgrounds transparent */
  #page .page-section {
background: transparent!important
}
#page .page-section .section-background {
background: transparent !important;
}
  <style>

On 8/3/2023 at 3:11 PM, PerfectCaptureBooth said:

Hmmm. This is the code I have applied specifically to that page. The top portion to hide the header and footer. Then the rest to apply one consistent image as the full page's background

 

<style>
  /* Hide All Footer Sections*/
  footer, header{
  display: none !important;
 }
}
  @media only screen and (max-width: 768px) {
  footer {
    display: none !important;
  }
}

.section-border{opacity:0!important} 
  
  /* Add the image as a background*/
#page{
background-image:url(https://static1.squarespace.com/static/646ee9e3f11e9d11d2e5552b/t/64cb205510b341420b7765dd/1691033686242/Pink+4.png);
background-size: cover}

/* Make the page section backgrounds transparent */
  #page .page-section {
background: transparent!important
}
#page .page-section .section-background {
background: transparent !important;
}
  <style>

Hi,

I see you solved this?

Yes! I ended up doing the page collection, and adding a code in the CSS area :

//main page remove header and footer
#collection-64cc8d43e9b3b21c0a852809{
 footer, header{
  display: none !important;
 }
}

Rather than putting it on the page specific coding. Then I put the buttons into one section, rather than two sections and coding 1 image to stretch across the full page!