Need help with "Responsive css" on my style sheet?

[iizag]

Hi , I have a responsive theme installed, I have used FireBug from fire fox to change the colors of certain parts of my website, and everything works perfectly on Fire fox. BUT the second I look on Google chrome, Internet Explorer, and my Phone it ALL looks horrible, the colors are all off.
This is what I have on my style sheet :
/* COLORS of Header tags etc in template */

.button:hover, .flexslider .category-label, .layout-module .widget-title > span, .pagination a:hover, .pagination .current, #primary-navigation .menu li.current-menu-item, #primary-navigation .menu li.current-menu-ancestor, #primary-navigation .menu li.current_page_item, #primary-navigation .menu > li:hover, #primary-navigation .menu > li.sfHover, #primary-navigation .menu ul a:hover, #primary-navigation .menu ul li.current-menu-item a, .review-box .heading, #searchform #searchsubmit:hover, #secondary .widget_fearless_tabs .headings a.active, section.top-reviews .review-column-1 h2, .sidebar-primary .widget-title, .wpcf7-submit:hover {

    background: -moz-linear-gradient(center top , #FEFEFE, #F4F4F4) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0) !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 1px !important;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset !important;
    color: #182945 !important;
}

/* like above */
.button:hover, .flexslider .category-label, .layout-module .widget-title > span, .pagination a:hover, .pagination .current, #primary-navigation .menu li.current-menu-item, #primary-navigation .menu li.current-menu-ancestor, #primary-navigation .menu li.current_page_item, #primary-navigation .menu > li:hover, #primary-navigation .menu > li.sfHover, #primary-navigation .menu ul a:hover, #primary-navigation .menu ul li.current-menu-item a, .review-box .heading, #searchform #searchsubmit:hover, #secondary .widget_fearless_tabs .headings a:hover, #secondary .widget_fearless_tabs .headings a.active, section.top-reviews .review-column-1 h2, .sidebar-primary .widget-title, .wpcf7-submit:hover {

    background: -moz-linear-gradient(center top , #FEFEFE, #F4F4F4) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0) !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 1px !important;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset !important;
    color: #182945 !important;
}

/* This changes colors of hover secondary widget headings like review widget */

#secondary .widget_fearless_tabs .headings a:hover {
    background: -moz-linear-gradient(center top , #FFFFFF, #F6F6F6) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0) !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 1px !important;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset !important;
    color: #40516D !important;
}

/* This affects Fearless Article widget on home page */

.layout-module .widget-title a {
color: #182945 !important;
}


/* -------------------------------- This JUST Affects the slider border color */

.featured-slider.flexslider .category-label-wrapper {
    border-color: #46A5E5 !important;
    border-radius: 1px !important;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset !important;
}

/* This changes the color of all secondary widget titles */
#secondary .widget-title, #secondary .widget-title a {
    color: #182945 !important;
}

/* This changes the color of the Non Active widgets Tabs */

#secondary .widget_fearless_tabs .headings a {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)) repeat scroll 0 0 #333333 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.5) !important;
    color: #CCCCCC !important;
    display: block !important;
    font-size: 1.3rem !important;
    margin: 0 !important;
    outline: 0 none !important;
    padding: 0.9em 0 !important;
    text-align: center !important;
}

I don’t understand why this is not working ? Does this have something to do with media queries ? Because I have also looked at the original style sheet of my theme and cant find any thing to point me in the right direction to add to my child theme ?

I appreciate all help given, thank you in advance

[Paulie_D]

You have a shipload of important statements in there…that’s not a good thing.

the colors are all off.

It looks like there is some inline CSS that might be causing an issue…perhaps it’s JS related

<span class="category-label" style="background-color: #;">Dentistry</span>

[Loreley]

The reason why some of the colours work only in Firefox is because in the css you have cs3 gradient brackground prefixed for FF only:
background: -moz-linear-gradient(center top , #FEFEFE, #F4F4F4) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0) !important;

You’ll also need the declarations for the other browsers, e.g:

background: -webkit-linear-gradient(top, #FEFEFE 0%, #F4F4F4 100%);

[Author]

Posts