Tim Salabim Tim Salabim - 2 months ago 17
Ruby Question

CSS Works in chrome devtools, not on live site

I have added a coloured background (Australian English!) to my websites navigation and tested it in Chrome DevTools though when I add it to my CSS file nothing happens.

I have checked the CSS file and it is definitely loaded on the page. The selectors look correct.

Forgive me if my terminology is incorrect as I am a graphic designer and inexperienced with web languages.

Any help would be appreciated! CSS I Added:

@media only screen and (min-width: 768px)
.template-index.transparent-menu .main-header {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Answer

The follwing code works fine for me

@media only screen and (min-width: 768px) {
.template-index .main-header {
 /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}  
}

I added the missing brackets and remove the .transparent-menu which is not present on the web site.

Comments