This is my code:

@media screen and (max-width: 480px) {

header {
    background-color: blue;
    }
}

On mobile, my main header (Header Dark Small > Group > Row) stays the default background color while a different header (Header Dark Small > Spacer) does change blue.

html:

<div >
  <header >
    <div          style="padding-top:0px;padding-bottom:0px">
      <div  style="padding-top:10px;padding-right:0px;padding-bottom:10px;padding-left:0px">...</div>
      <header ></header>
    </div>
    <div  style="height:66px" aria-hidden="true" ></div>
</header>

Changing the code on chrome, I found something I don't understand:

.wp-site-blocks > * {
  background-color: blue;
}

That doesn't affect main header. But when I move up and change:

.wp-site-blocks, body > .is-root-container, .edit-post-visual-editor__post-title-wrapper, .wp-block-group.alignfull, .wp-block-group.has-background, .wp-block-cover.alignfull, .is-root-container .wp-block[data-align="full"] > .wp-block-group, .is-root-container .wp-block[data-align="full"] > .wp-block-cover {
  padding-left: var(--wp--custom--spacing--outer);
  padding-right: var(--wp--custom--spacing--outer);
  background-color: red;
}

That does change the main header's background color.

CodePudding user response：

Without knowing what you html looks like i can only hazard a guess. But it looks like maybe you are using a third party to style things such as bootstrap. Have you tried

@media screen and (max-width: 480px) {

header {
    background-color: blue !important;
    }
}

or specifying a more strict selector such as

@media screen and (max-width: 480px) {

div.wp-site-blocks header.wp-block-template-part {
    background-color: blue !important;
    }
}

CodePudding user response：

Try styling by specifying the classes you have in each header.

e.g.

 header .wp-block-template-part {}

If it doesn't work try to use !important in your CSS properties because as I see they are wordpress classes