Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need help with "Responsive css" on my style sheet?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #157206
    iizag
    Participant

    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

    #157223
    Paulie_D
    Member

    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>
    
    #157248
    Loreley
    Participant

    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%);
    
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.