Ethos Change Sidebar headings not working on mobile

[King]

Hi,

I am using the Ethos theme and have managed to change the headings of each widget in the sidebar to have a purple background and white text which works great. When i resize the screen to a mobile device, the background of the header is still purple but the font changes to black. Do you know ho i can keep the text white even on mobiles? Here is the code that i cam currently using:

/* adds colour to the heading box and changes font colour in sidebar, Ethos theme*/
.x-main .h-widget, .x-main .widget.widget_pages .current_page_item, .x-main .widget.widget_nav_menu .current-menu-item, .x-sidebar .h-widget, .x-sidebar .widget.widget_pages .current_page_item, .x-sidebar .widget.widget_nav_menu .current-menu-item {
border-color: #443688;
background-color: #443688;
color: white;
}

Im sure i probably need an @media somewhere but dont fully understand it.

thanks guys.

[thai]

Hi There,

The color of widget heading change to black because of this default custom CSS:

body .x-main .h-widget,body .x-main .widget.widget_pages .current_page_item a,body .x-main .widget.widget_nav_menu .current-menu-item a,body .x-main .widget.widget_pages .current_page_item a:hover,body .x-main .widget.widget_nav_menu .current-menu-item a:hover,body .x-sidebar .h-widget,body .x-sidebar .widget.widget_pages .current_page_item a,body .x-sidebar .widget.widget_nav_menu .current-menu-item a,body .x-sidebar .widget.widget_pages .current_page_item a:hover,body .x-sidebar .widget.widget_nav_menu .current-menu-item a:hover {
                    color: #272727;
                }

To override it, please add this custom CSS:

@media (max-width: 979px){
     body .x-main .h-widget {
          color: #fff !important;
     }
}

Hope it helps

[King]

Hi @thai

Unfortunately that did not work. Its still black when i shrink it down to mobile. See here:

[ruenel]

Hey @King,

The code should have worked as we have tested it before giving it to you. There maybe a css conflict happening in your site. Would you mind providing us the url of your staging site so that we can check it?

Thanks.

[King]

Hi @RueNel

To see the site that i am referring to, you will have to enter the following into your local host file and clear your browser cache and flush your dns as i am building it ready to replace a live site:

77.104.134.196 snhs.kirklees.sch.uk

Then when you browse to the site, the homepage should have a video on it. The page where i am trying to the above is under: parent info > our staff > teaching staff.

thanks.

[ruenel]

Hello @king,

Have the code updated and use this instead:

@media (max-width: 979px){
     body .x-main .h-widget,
     body .x-sidebar .h-widget {
          color: #fff !important;
     }
}

Hope this helps. Kindly let us know.

[King]

Hi @RueNel, works a charm thank you very much guys!

[rad]

You’re most welcome!