Mobile-specific css issues

MaxFlu · November 13, 2023

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

SaranyaDesigns · November 13, 2023

@MaxFlu for the first issue, I think you just need to add a SPACE between your section ID and your .background selectors, like this:

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

For mobile menu, DONATE button is red when I view it already 🙂 but to get the underline of the current page to be red also, try adding this:

:is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content {
	background-image: linear-gradient(#d8463f,#d8463f) !important;
}

and for the header to remain blue background, this:

.header .header-announcement-bar-wrapper {
	background: var(--solidHeaderBackgroundColor);
}
.header--menu-open .header .header-burger .top-bun, .header--menu-open .header .header-burger .patty, .header--menu-open .header .header-burger .bottom-bun {
	background-color: #fff !important;
}

and lastly, for the homepage desktop header:

@media (min-width:800px) {
 #collection-654a8793b0142d659125cc61 .header .header-announcement-bar-wrapper {
	--solidHeaderBackgroundColor: transparent !important;
	}
}

MaxFlu · November 13, 2023

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

SaranyaDesigns · November 13, 2023

@MaxFlu ok yes the button is blue on mine now as well, try this:

.header-menu-cta .theme-btn--primary {
	background-color: var(--primaryButtonBackgroundColor) !important;
}

The whitespace I think is a loading animation issue, I can't recreate that on my end, unfortunately so hard to troubleshoot... Does it still happen when you view the live site in an incognito window?

The syntax error is expected because the style is not in a standard CSS format, it's pulling from the custom site styles template instead, does it let you approve and publish anyway? I'll have a look at the background image for you shortly...

SaranyaDesigns · November 13, 2023

@MaxFlu ok for the header image, you were just missing quotes around the section id, try this:

@media only screen and (max-width: 640px) {
	[data-section-id="654a8793b0142d659125cc64"] .section-background img {
		opacity: 0;
 }
[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;
	}
}

MaxFlu · November 13, 2023

20 minutes ago, SaranyaDesigns said:
@MaxFlu ok yes the button is blue on mine now as well, try this:
.header-menu-cta .theme-btn--primary {
	background-color: var(--primaryButtonBackgroundColor) !important;
}
The whitespace I think is a loading animation issue, I can't recreate that on my end, unfortunately so hard to troubleshoot... Does it still happen when you view the live site in an incognito window?

The syntax error is expected because the style is not in a standard CSS format, it's pulling from the custom site styles template instead, does it let you approve and publish anyway? I'll have a look at the background image for you shortly...

Ah gotcha! I appreciate the explanation. This worked, but it turned the background and header white as opposed to the navy blue.

10 minutes ago, SaranyaDesigns said:

@MaxFlu ok for the header image, you were just missing quotes around the section id, try this:

@media only screen and (max-width: 640px) {
	[data-section-id="654a8793b0142d659125cc64"] .section-background img {
		opacity: 0;
 }
[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;
	}
}

This still isn't working on my end for some reason...

Edited November 13, 2023 by MaxFlu

SaranyaDesigns · November 13, 2023

hmmm it's working in my inspector tools when I test it... what's happening on your end that it's not working, is there just no background image at all? Can you leave the coding in your custom CSS so I can have a look if it's being overridden maybe? You might need to add !important to some properties...

@media only screen and (max-width: 640px) {
	[data-section-id="654a8793b0142d659125cc64"] .section-background img {
		opacity: 0;
   }
[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 top;
		background-repeat: no-repeat;
	}
}

SaranyaDesigns · November 13, 2023

@MaxFlu what browser are you using? And are you testing in an incognito window when you apply the new CSS? The transparent header is also working as expected in my testing tools in Chrome, but maybe other browsers are not reading the custom style templates the same way?

MaxFlu · November 13, 2023

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!

Quote

// HEADER //

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

.header-menu-cta .theme-btn--primary {
   background-color: var(--primaryButtonBackgroundColor) !important;
}

@media (min-width:800px) {
#collection-654a8793b0142d659125cc61 .header .header-announcement-bar-wrapper {
   --solidHeaderBackgroundColor: transparent !important;
   }
}

// END HEADER //

// MOBILE SPECIFICS //

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

@media only screen and (max-width: 640) {
#page .page-section:nth-child(1) {
margin-top: 100px !important;
}
}

   // MOBILE SPECIFIC HEADER //

@media only screen and (max-width: 640px) {
.header {
background-color: #04275c!important;
}

.header .header-announcement-bar-wrapper {
   background: var(--solidHeaderBackgroundColor);
}
.header--menu-open .header .header-burger .top-bun, .header--menu-open .header .header-burger .patty, .header--menu-open .header .header-burger .bottom-bun {
   background-color: #fff !important;
}
}

@media only screen and (max-width: 640px) {
.header-menu-nav * {
color: white!important; background-color: #04275c!important;

:is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content {
   background-image: linear-gradient(#d8463f,#d8463f) !important;
}
}
}

   // END MOIBLE SPECIFIC HEADER //

// END MOBILE SPECIFICS //

// FOOTER //

footer h4 {
font-size: 1em;
text-decoration: none;
}

footer h4:hover { background:#d8463f!important;
}

use.sqs-use--icon:hover {
fill:#d8463f !important;
}

// END FOOTER //

// 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 · November 13, 2023

ah... @MaxFlu remove the "#page" selector from the mobile image code... just replace that whole section with my version instead and let me know if it's still not working?

@media only screen and (max-width:640px) {
	[data-section-id="654a8793b0142d659125cc64"] .section-background img {
		opacity: 0;
   }
[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 top;
		background-repeat: no-repeat;
	}
}

SaranyaDesigns · November 13, 2023

@MaxFlu I think you've got some close brackets out of order on this section as well, which could be throwing some things off:

@media only screen and (max-width: 640px) {
.header-menu-nav * {
    color: white!important; background-color: #04275c!important;
  
  :is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content {
    background-image: linear-gradient(#d8463f,#d8463f) !important;
}
}
}

replace that section with this:

@media only screen and (max-width: 640px) {
	.header-menu-nav * {
		color: white!important; background-color: #04275c!important;
	}
	:is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content {
		background-image: linear-gradient(#d8463f,#d8463f) !important;
	}
}

MaxFlu · November 13, 2023

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. 🤦‍♂️

SaranyaDesigns · November 13, 2023

@MaxFlu I think you are right, because when I inspect the page here: https://pineapple-bullfrog-rlgh.squarespace.com/home and specifically look for ANY of your custom CSS, most of it is not being read at all... might be worthwhile running it through a validator, I can see you've got a few punctuation marks out of order and missing in a few places... but it is strange that it's not reading any of it at all...

SaranyaDesigns · November 13, 2023

@MaxFlu try swapping out all of your comment markers with /* */ instead of // // so for example, instead of:

// MOBILE SPECIFIC HEADER //

replace it with:

/* MOBILE SPECIFIC HEADER */

do that for all of them?

MaxFlu · November 13, 2023

12 minutes ago, SaranyaDesigns said:

@MaxFlu try swapping out all of your comment markers with /* */ instead of // // so for example, instead of:

// MOBILE SPECIFIC HEADER //

replace it with:

/* MOBILE SPECIFIC HEADER */

do that for all of them?

I did that! It didn't change anything, unfortunately.

16 minutes ago, SaranyaDesigns said:

@MaxFlu I think you are right, because when I inspect the page here: https://pineapple-bullfrog-rlgh.squarespace.com/home and specifically look for ANY of your custom CSS, most of it is not being read at all... might be worthwhile running it through a validator, I can see you've got a few punctuation marks out of order and missing in a few places... but it is strange that it's not reading any of it at all...

Strange indeed...Thank you for all of your help on this! It's driving me crazy.

SaranyaDesigns · November 14, 2023

@MaxFlu try replacing ALL of your CSS with this and let me know if it starts applying to the page again?

/* HEADER */

.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;
}
.header-menu-cta .theme-btn--primary {
  background-color: var(--primaryButtonBackgroundColor) !important;
}
@media (min-width:800px) {
  #collection-654a8793b0142d659125cc61 .header .header-announcement-bar-wrapper {
      --solidHeaderBackgroundColor: transparent !important;
 }
}

/* END HEADER */

/* MOBILE SPECIFICS */

@media only screen and (max-width:640px) {
	[data-section-id="654a8793b0142d659125cc64"] .section-background img {
		opacity: 0;
   }
[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 top;
		background-repeat: no-repeat;
	}
  #page .page-section:nth-child(1) {
      margin-top: 100px !important;
 }
}

/* MOBILE SPECIFIC HEADER */

@media only screen and (max-width:640px) {
  .header {
      background-color: #04275c!important;
  }
  .header .header-announcement-bar-wrapper {
      background: var(--solidHeaderBackgroundColor);
  }
  .header--menu-open .header .header-burger .top-bun, .header--menu-open .header .header-burger .patty, .header--menu-open .header .header-burger .bottom-bun {
      background-color: #fff !important;
  }
  .header-menu-nav * {
      color: white!important;
      background-color: #04275c!important;
  }
      :is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content {
          background-image: linear-gradient(#d8463f,#d8463f) !important;
  }
}

/* END MOIBLE SPECIFIC HEADER */
/* END MOBILE SPECIFICS */

/* FOOTER */

footer h4 {
  font-size: 1em;
  text-decoration: none;
}
footer h4:hover {
  background:#d8463f!important;
}
use.sqs-use--icon:hover {
  fill:#d8463f !important;
}

/* END FOOTER */

/* 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 */

MaxFlu · November 14, 2023

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

melody495 · November 14, 2023

Hi, if none of your CSS code is taking effect, then there is a syntax error in your code. If that is the case, please copy and save all code somewhere, then remove everything in Custom CSS. You can then add one block of code back at a time, to make sure each is working as expected. You should be able to find the culprit fairly quickly.

Edited November 14, 2023 by melody495

SaranyaDesigns · November 14, 2023

@MaxFlu yes I was about to suggest the same as @melody495 - the version I sent you should be cleaned up and formatted to eliminate syntax issues already, but if it's still not taking effect, then I would remove ALL css and then start by adding in one simple obvious thing that you test to make sure it's taking effect. Something like

header {
	display: none !important;
}

If this doesn't hide your header entirely from the site, then something is causing your custom CSS to not be read at all. Do you have any other custom coding added to the site anywhere?

MaxFlu · November 14, 2023

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?

SaranyaDesigns · November 14, 2023

@MaxFlu did you discover what bit of code was causing the error once you added piece by piece? I'm curious...

Meanwhile, it looks like the extra spacing under the header is caused by this bit of CSS you added at some point:

#page .page-section:nth-child(1) {
    margin-top: 100px !important;
}

If you remove that, the extra spacing should go away...

MaxFlu · November 15, 2023

15 hours ago, SaranyaDesigns said:
@MaxFlu did you discover what bit of code was causing the error once you added piece by piece? I'm curious...

Meanwhile, it looks like the extra spacing under the header is caused by this bit of CSS you added at some point:
#page .page-section:nth-child(1) {
    margin-top: 100px !important;
}
If you remove that, the extra spacing should go away...

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!

Mobile-specific css issues

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

melody495

SaranyaDesigns

SaranyaDesigns

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources