PerfectCaptureBooth

Fixed thank you!

That worked thank you!

Hi, my site www.perfectcapturebooth.com is multi-lingual and I was previously successful at hiding certain folders with certain pages. But now it seems for mobile, all of the folders are being shown in the menu! These are the codes that I was using, the desktop code still works properly. Mobile isn't working Please help! : <style> /* hide items on desktop */ nav.header-nav-list>div:nth-child(1), nav.header-nav-list>div:nth-child(3), nav.header-nav-list>div:nth-child(4) { display: none; } /* hide items on mobile */ .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(1), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3), header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(4) { display: none !important; } </style>

Having the same issue, following for update

Updating, this code is no longer working for mobile, any solution? /* hide items on mobile */ .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(2), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3) { display: none !important; } </style>

Thanks a ton @creedon ! This fixed it!

Hey, I'm seeing this problem on my Spanish home, locations, contact, and FAQs pages for my site. In the tab it shows <br/> https://www.perfectcapturebooth.com/inicio https://www.perfectcapturebooth.com/ubicaciones https://www.perfectcapturebooth.com/contactenos https://www.perfectcapturebooth.com/faqs-spanish Any clue on why?

Solved it all! Thanks!

Update : So I'm trying this code instead, where I changed the "hide items on mobile " coding completely. And so far, this seems to work correctly. <style> /* hide items on desktop */ nav.header-nav-list>div:nth-child(2), nav.header-nav-list>div:nth-child(3) { display: none; } /* hide items on mobile */ .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(2), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3) { display: none !important; } </style>

Hey man sorry for barely getting to this! So I tried this code, for the desktop it works, but for mobile nothing is happening at all. Not sure if I'm inputting it wrong or something. This is how I inserted it: <style> /* hide items on desktop */ nav.header-nav-list>div:nth-child(2), nav.header-nav-list>div:nth-child(3) { display: none; } /* hide items on mobile */ [data-folder="root"]>div:first-child>div:nth-child(2), [data-folder="root"]>div:first-child>div:nth-child(3), { display: none; } </style>

Yes I ended up doing that

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!

Yes, it's perfectcapturebooth.com For English pages, it seems the "Home" and "About Us" are missing on the mobile version menu And on the Spanish pages, it seems "Reserva" and a few other pages seem to go missing. This is the code that Im using : <style> #header .header-nav-item:nth-child(2){ display:none } #header .header-nav-item:nth-child(3){ display:none } </style> <style> @media screen and (max-width:1511px){ #header .header-menu-nav-item:nth-child(2){ display:none } #header .header-menu-nav-item:nth-child(3){ display:none } </style>

Did you ever fully solve this? I have english and spanish pages and I just realized I have the same issue out of nowhere

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>

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"

I'm having the same issue on my first page for the site. I currently have the header and footer not showing, and on desktop, it's perfectly fine. But on mobile, there's this huge white space. Is there anything that I can do? Site: PerfectCaptureBooth.com Password:2926

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

Hey, I recently added this Availability Calendar onto my website, which is hosted by a booking platform outside of squarespace. I entered the embedded code to get the calendar on my site, but I was wondering if I could add a black outline, and maybe a drop shadow around it. I'm stuck and assuming that it has to be displayed the way it is, since it's coming from the booking site that I am using. This is the website: PerfectCaptureBooth.com Password : 2926 It's right on the home page. and This is the block ID: #block-yui_3_17_2_1_1690939779928_4739 I was thinking it would be as easy as doing : #block-yui_3_17_2_1_1690939779928_4739 { filter: drop-shadow(5px 5px 8px #000000); } But I guess that doesn't work. Any help would be appreciated!

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

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?

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

I have it on two pages. "gallery" and "galeria" on the spanish version of the site once you click "espanol"

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?

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?