MaxFlu

I think it was a couple of extra/redundant brackets, but I'm not 100% sure. And on that code with the margin-top — that worked. Thanks so much!

Thanks @SaranyaDesigns and @melody495! I've had success with the majority of the CSS issues when I've removed all of it and added them in one by one! Now, a new issue randomly popped up, there seems to be white space under the header now, between the bottom of the header and the top of the page content. I've tried to edit it through the "edit header" function and cannot get it to go away. Would either of you have any thoughts as to why that white space is now appearing and how to get rid of it?

I'm having a strange issue where the text background color on my pop-up is white, when I'm trying to make it navy blue. It's almost as if the text background color is white or the text is being highlighted in white, neither of which I did. Would anyone have thoughts on to why this is happening? I've attached a screenshot and included the custom CSS I'm currently using on the pop-up: /* POP-UP*/ .sqs-slide-wrapper[ data-slide-type = "popup-overlay"] .form-disclaimer-text { display: none; } /* remove X */ .sqs-popup-overlay-close { display: none; } /* round corners */ .sqs-slide-wrapper[ data-slide-type = "popup-overlay"] .sqs-slide-layer-content { border-radius: 20px; } /* gradient backdrop */ .sqs-slide-wrapper[ data-slide-type = "popup-overlay"] .layer-back { background: linear-gradient(to right, #04275c, #d8463f); opacity: .65; } /* END POP-UP */

@SaranyaDesigns — I updated with that CSS ^ and unfortunately it didn't change anything.

I did that! It didn't change anything, unfortunately. Strange indeed...Thank you for all of your help on this! It's driving me crazy.

Thank you! I did both of those ^ and I'm not seeing any differences unfortunately! I'm beginning to think there are some points in my code that may be invalidating each other, but I have no idea what they could be. 🤦‍♂️

For the home page hero image, on mobile it's just keeping the same image that's used for desktop. Im looking at the changes in incognito browsers on Safari and Chrome. I'm not sure what I'm doing wrong. Here's all of my CSS, which includes several of your codes snippets as well!

Ah gotcha! I appreciate the explanation. This worked, but it turned the background and header white as opposed to the navy blue. This still isn't working on my end for some reason...

@SaranyaDesigns — THANK YOU!! Really appreciate you taking the time to look this over and help. For the first issue, unfortunately that didn't solve the problem. It's still won't change to the alternative background image on mobile size for the first section on the home page. Is there a way to maybe use the nth-child code but just on the home page? For the second and third issues, that worked partially. The red underline did work! But for some reason when I scroll while on the menu, it's showing white space between the header and the navigation menu when the menu is opened and the button is still blue for some reason on my end (I've attached a screenshot). And i'm not sure why, but for the home page desktop header, I'm getting a syntax error. Do you have any other thoughts on these? I could paste my entire CSS code if that's helpful. Thanks again, I'm grateful for your support! 🙏

Hi there — I'm having some trouble making some custom css adjustments for mobile screen sizes and one question on a non-mobile screen size css adjustment. Would greatly appreciate any thoughts on how I can fix these issues. Sorry if the code I share is messy...it's been a long while since I worked on CSS. Site URL: https://pineapple-bullfrog-rlgh.squarespace.com/home Site password: GAgwinnett Mobile-specific css issues: 1. On my home page, I added in custom css to have an alternate background image on a mobile screen size. It was working when I was referring to the section in code with nth-child specifics, but I needed to use data section ID because nth-child was applying to the entire website instead of just the home page, and now it's not working. Here's my css on that: @media only screen and (max-width: 640px){ #page [data-section-id=654a8793b0142d659125cc64].section-background img {opacity:0} #page [data-section-id=654a8793b0142d659125cc64].section-background { background-image: url(https://static1.squarespace.com/static/654a8792b0142d659125cc24/t/654c0e34b4f8c95168b4fbdc/1699483189138/Sam-Park-Home-Page-Hero-Image-Mobile.png); background-size: cover; background-position: center; background-repeat: no-repeat; } } 2. For the menu on the mobile version of my site, I'm having some issues with my navigation items. I can't get the active page to become underlined in red. I can't get the top header bar to remain navy blue, when the menu is clicked on it become white at the top. And I need the donate button to be red, I can't get it to not be navy blue. Here's my code for my header nav menu: .sqs-button-element--secondary:hover { background-color:#d8463f!important; color: #fff!important;font-weight: 900!important } .sqs-button-element--tertiary:hover { background-color:white!important; color: #d8463f!important;font-weight: 900!important } .sqs-button-element--primary:hover { background-color:white!important; color: #d8463f!important;font-weight: 900!important } .header-nav a:hover { background:#d8463f!important;color:white!important;font-weight:900!important } .header-actions-action--social .icon:hover svg{fill: #d8463f!important} @media only screen and (max-width: 640px) { .header { background-color: #04275c!important; } } @media only screen and (max-width: 640px) { .header-menu-nav * { color: white!important; background-color: #04275c!important; } } 3. The last thing I'm trying to figure out is if it's possible to make my header transparent only on the home page on a non-mobile screen size. Really appreciate any insights that anyone may have on these issues, thank you in advance!!