Custom Code Causing a problem?

Hi all, 

I used to have a developer on staff, but after cancer, it's down to just me...and the help you can provide. 

the site breaks on mobile devices, by adding a dark bar on the right side. I can fake it with the overflow fix I found by searching here, but it doesn't solve the problem permanently. one can still slide to the right and see that brown bar. 

Squarespace help tried their best, but they tell me it's because there's custom code causing the problem. 

My theory is that it's related to anything in a nested navigation. but even pages not in a nested navigation are having this issue.  

Here's the main site: https://fiddleheadhq.com
here's the main page in question: https://fiddleheadhq.com/digital-marketing-services 

screen shots are attached along with one of the custom css. the one with pink writing is from desktop and points to my theory about where the problem might lie. another idea is that I implemented the cookie banner on the site today. but turning that off didn't seem to solve the problem either.  


I'd be so grateful, so thank you in advance. 

Melinda

 

@Mjb_FH That navigation looks to be part of the template your website is built on, so it shouldn't be what's causing the problem.

Do you have the overflow CSS added currently?

html, body {

overflow-x: hidden;}

Hi @WCS and thanks for offering that suggestion. As you'll see at the very bottom of the custom css, I've added that.  but what happens is

a) it doesn't solve the problem because you can slide the page to the right on mobile and still see the box; 

b) as you can see in the new photo below, even the footer goes outside of it. 

fwiw, squarespace help said they think it's the custom css. 

@WCS some progress. I've double checked the code, and cleaned up a little bit of it. seems to solve a lot of the problem. (this is why I never became a dev, so many details...:D) 

big issue left is that newsletter signup block on the bottom of the side that now can't fill in on mobile. 

screen shot attached, perhaps we've narrowed it down to the "newsletter" block on the bottom?

@Mjb_FH

I see that line in there (it's hard to read the image -- sorry!) but I would separate it from the newsletter code.

You can try copying all the CSS and then deleting it. I'd recommend pasting it into something that won't format it, like here. Make sure you do this right away so you don't lose your code!

Check on your phone to see if the problem is solved or not. 

If it is, we can figure out what line is causing it. If it's not, you may want to check to see if any pages have code added. You can check this by clicking the cog near a page to access its settings. Then click Advanced and see if there's anything there.

@WCS and @jpeter you have both solved the problem!

WCS thank you for pointing out the extra bracket and advising me to check page code.  
Jpeter, you got the right css selector out of the way! I worry now that I don't know what fences I just tore down but for now things appear to be functioning properly! 

I am truly grateful. In over 8 years of using squarespace this is the first time I have  needed  the forums and you have both delivered! 

@Mjb_FH Of course! So happy @jpeter was able to resolve it. This is what the forum is here for -- I think it's one of the best parts of Squarespace ☺️