PerfectCaptureBooth Posted July 18, 2023 Share Posted July 18, 2023 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 } Link to comment
Ziggy Posted July 18, 2023 Share Posted July 18, 2023 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? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
PerfectCaptureBooth Posted July 18, 2023 Author Share Posted July 18, 2023 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 Link to comment
Ziggy Posted July 18, 2023 Share Posted July 18, 2023 I'm no longer seeing the gittering I was getting on your website. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
PerfectCaptureBooth Posted July 18, 2023 Author Share Posted July 18, 2023 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. Ziggy 1 Link to comment
Ziggy Posted July 18, 2023 Share Posted July 18, 2023 I'm really not too sure, but we can come back to this if you see any problems in the future. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
PerfectCaptureBooth Posted July 24, 2023 Author Share Posted July 24, 2023 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? Link to comment
Ziggy Posted July 24, 2023 Share Posted July 24, 2023 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? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
PerfectCaptureBooth Posted July 26, 2023 Author Share Posted July 26, 2023 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? Link to comment
Ziggy Posted July 26, 2023 Share Posted July 26, 2023 What page is the gallery on? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
PerfectCaptureBooth Posted July 26, 2023 Author Share Posted July 26, 2023 (edited) I have it on two pages. "gallery" and "galeria" on the spanish version of the site once you click "espanol" Edited July 26, 2023 by PerfectCaptureBooth Link to comment
PerfectCaptureBooth Posted July 26, 2023 Author Share Posted July 26, 2023 (edited) 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; } Edited July 26, 2023 by PerfectCaptureBooth Ziggy 1 Link to comment
PerfectCaptureBooth Posted July 26, 2023 Author Share Posted July 26, 2023 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? Link to comment
Solution Ziggy Posted July 26, 2023 Solution Share Posted July 26, 2023 Because only the two sections adjacent to one another mesh with a divider when you hide the first section in the footer you end up with this blank space. Two options: Have a straight divider. Place a single-row section with a background at the very top of your footer. This probably won't have quite the effect as the backgrounds won't pattern-match, but it would look better than the white space. Third long-shot option: add the same divider between the two language footer sections. I have a feeling this won't quite work, but worth a try. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
PerfectCaptureBooth Posted July 26, 2023 Author Share Posted July 26, 2023 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!! Ziggy 1 Link to comment
Ziggy Posted July 26, 2023 Share Posted July 26, 2023 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! tuanphan 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
PerfectCaptureBooth Posted August 3, 2023 Author Share Posted August 3, 2023 (edited) 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 Edited August 3, 2023 by PerfectCaptureBooth Attached Screenshot Link to comment
Ziggy Posted August 3, 2023 Share Posted August 3, 2023 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: Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
PerfectCaptureBooth Posted August 3, 2023 Author Share Posted August 3, 2023 (edited) 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" Edited August 3, 2023 by PerfectCaptureBooth Link to comment
Ziggy Posted August 3, 2023 Share Posted August 3, 2023 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. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
PerfectCaptureBooth Posted August 3, 2023 Author Share Posted August 3, 2023 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> Link to comment
tuanphan Posted August 4, 2023 Share Posted August 4, 2023 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? PerfectCaptureBooth 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
PerfectCaptureBooth Posted August 5, 2023 Author Share Posted August 5, 2023 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! tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment