Different Header Color

[AlokBeheria]

Hello All,

I am new to Shopify and have recently created my store. However, I am encountering an issue where the header background color appears white when viewed on a desktop and black when viewed on a mobile device. I attempted to resolve this by applying the following code to Assets --> base.css, but the problem persists.

@media only screen and (max-width: 989px){
.header-wrapper.color-background-1.gradient {
background: white;
}
.header-wrapper.color-background-1.gradient * {
color: white;
}
div#shopify-section-sections--21453125976343__header {
margin-bottom: 0px;
}
}

Desktop Header

Mobile Header

Regards

[AlokBeheria]

I applied your solution, but issue still persist. 

Regards

[AlokBeheria]

After applying and save it , it refused to work.

Regards

A

[devcoders]

Hi @AlokBeheria 

Here’s a more structured approach:

Define the CSS for desktop and mobile separately.
Ensure selectors are correctly targeting the elements.
Check for other conflicting styles.

Here’s an improved version of your CSS code:

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.

.header-wrapper.color-background-1.gradient {
  background: white;
}
.header-wrapper.color-background-1.gradient * {
  color: black; /* Assuming you want text color to be black on desktop */
}

@media only screen and (max-width: 989px) {
  .header-wrapper.color-background-1.gradient {
    background: black;
  }
  .header-wrapper.color-background-1.gradient * {
    color: white;
  }
  div#shopify-section-sections--21453125976343__header {
    margin-bottom: 0px;
  }
}