Changing accent color for all breakpoints

[fbrugger]

Hi there

I have changed the color of the headline accents with this CSS:

.h-custom-headline.accent span:after {
height: 2px;
background-color: #c30037;
}

This works well for sizes XL and L. For smaller devices like M, S XS, the code has no effect.

What could be the problem?

Thank you very much for your help.

[lely]

Hi Felix,

Can you share the URL where this issue exist. It might be working but since on smaller devices, the header text might occupy the entire row, so there is no space anymore for the accent. If you are seeing an accent just different color and you didn’t add those specific color for mobile, it means CSS syntax error. Please double check all your CSS. Make sure all brackers are partners. Any missing or excess brackets {} will result to CSS issues. This usually happens when you are using media queries.

Let us know how this goes.

[fbrugger]

Hi Lely

Thank you very much for your reply. The issue is on the home page below the slider.

Thanks again!

[fbrugger]

Hi Lely

I have checked the CSS and the problem was the following code:

/* shrinking Header */
@media(min-width: 979px) {
.home .masthead {

        position:absolute;
        width:100%;            
   }

@media (min-width: 979px) {
.x-navbar.x-navbar-fixed-top {
transition: all 1s ease;
background: #fff !important;
}

.x-navbar.x-navbar-fixed-top {
top:-50px;
}

When I set min-width: 480px, it works.

Thanks again!

[nabeel]

Hey Felix,

We’re glad you managed to fix it on your own, however I noticed there are missing curly brackets in your custom CSS which will break your CSS, please make sure all of your media queries have a closing curly bracket before writing another media query. For example, this part of your code:

 @media(min-width: 480px) {
                .home .masthead {
                    position:absolute;
                    width: 100%;
                }

                @media (min-width: 480px) {
                    .x-navbar.x-navbar-fixed-top {
                        transition:all 1s ease;
                        background: #fff !important;
                    }

                    .x-navbar.x-navbar-fixed-top {
                        top: -50px;
                    }

                    .x-navbar .desktop .x-nav > li > a:hover,.x-navbar .desktop .x-nav > .x-active > a,.x-navbar .desktop .x-nav > .current-menu-item > a,.x-navbar .desktop .sub-menu li > a:hover,.x-navbar .desktop .sub-menu li.x-active > a,.x-navbar .desktop .sub-menu li.current-menu-item > a,.x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a,.x-navbar .mobile .x-nav li > a:hover,.x-navbar .mobile .x-nav li.x-active > a,.x-navbar .mobile .x-nav li.current-menu-item > a {
                        color: #000826;
                    }

                    .x-masthead .x-anchor-text-primary {
                        font-family: "Montserrat" !important;
                    }

                    .h-custom-headline.accent span:after {
                        height: 3px;
                        background-color: #c30037;
                        margin-left: 0px;
                    }

                    .h-custom-headline {
                        word-spacing: 0.1em;
                    }

Should be:

 @media (min-width: 480px) {
    .home .masthead {
        position:absolute;
        width: 100%;
     }
     .x-navbar.x-navbar-fixed-top {
          transition:all 1s ease;
          background: #fff !important;
      }

      .x-navbar.x-navbar-fixed-top {
          top: -50px;
      }

      .x-navbar .desktop .x-nav > li > a:hover,.x-navbar .desktop .x-nav > .x-active > a,.x-navbar .desktop .x-nav > .current-menu-item > a,.x-navbar .desktop .sub-menu li > a:hover,.x-navbar .desktop .sub-menu li.x-active > a,.x-navbar .desktop .sub-menu li.current-menu-item > a,.x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a,.x-navbar .mobile .x-nav li > a:hover,.x-navbar .mobile .x-nav li.x-active > a,.x-navbar .mobile .x-nav li.current-menu-item > a {
          color: #000826;
      }

      .x-masthead .x-anchor-text-primary {
          font-family: "Montserrat" !important;
      }

      .h-custom-headline.accent span:after {
          height: 3px;
          background-color: #c30037;
          margin-left: 0px;
      }

      .h-custom-headline {
          word-spacing: 0.1em;
      }
 }

Hope this helps!