[Resolved] I’m having to add css twice for changes to take effect

[Ben]

Hi Guys,

I’m having to add the same css twice before the changes to take effect.

For example, on this page: https://sitra.org/cost-guides/

I’ve added a box shadow using the folowing css:

.gb-grid-wrapper > .gb-grid-column > .gb-container {
box-shadow: 0px 2px 16px 0px rgba(0,0,0,.1);
}

However, that didn’t work.

I had to add it twice like:

.gb-grid-wrapper > .gb-grid-column > .gb-container {
box-shadow: 0px 2px 16px 0px rgba(0,0,0,.1);
}
.gb-grid-wrapper > .gb-grid-column > .gb-container {
box-shadow: 0px 2px 16px 0px rgba(0,0,0,.1);
}

Why is this happening?

Thanks

Ben

[David]

Hi there,

you have some extra } in the CSS above that are not necessary and breaking the CSS.

The only time a CSS rule will end in:

   }
}

Is if it is starts with @media.

Any CSS rules you have outside the @media must finish in single bracket.
The three rules that are broken are ( i have commented what to remove ):

.main-navigation .main-nav ul li.nav-button:hover a {
    background-color: #236cca;
    border: 2px solid #236cca;
    color: #ffffff;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, .1);
}
} /* Remove this bracket */

/*Buttons**/
a.button,
a.button:visited,
a.wp-block-button__link:not(.has-background) {
    background-color: #ff2500;
    color: #ffffff;
    line-height: 35px;
    padding: 10px 45px 10px 45px;
    border-radius: 3px;
    margin-top: 20px;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, .1);
}
} /* Remove this bracket */

a.button,
a.button:hover,
a.wp-block-button__link:hover(.has-background) {
    background-color: #236cca;
    color: #ffffff;
    line-height: 35px;
    padding: 10px 45px 10px 45px;
    border-radius: 3px;
    margin-top: 20px;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, .1);
}
} /* Remove this bracket */

[Ben]

Ahh Gotcha!

All fixed.

Thanks for your time!

[David]

You’re welcome

[Author]

Posts