Question 30103 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Media query in style.css doesn't affect all header parts. How can I target all headers? – WordPress

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 class="wp-site-blocks">
  <header class="wp-block-template-part">
    <div class="wp-container-8 wp-elements-7 wp-block-group alignfull has-foreground-color has-background-background-color has-text-color has-background has-link-color"         style="padding-top:0px;padding-bottom:0px">
      <div class="wp-container-6 wp-block-group alignfull" style="padding-top:10px;padding-right:0px;padding-bottom:10px;padding-left:0px">...</div>
      <header class="alignwide wp-block-template-part"></header>
    </div>
    <div class="wp-block-spacer" style="height:66px" aria-hidden="true" class="wp-block-spacer"></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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I used Google Chrome's inspect element to find, copy, and paste the relevant style.css code, and that solved my issue.


  2. 0

    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;
    }
}
    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search