Cell Phone Widget Font Color Did not Change

In the website we changes the widget Text Box as follows.

/* Change Widget Color, weight, etc*/
.x-main .h-widget, .x-sidebar .h-widget {
font-weight: 700;
background-color: black;
color: white;
border-width: 3px;
border-color: #ffffff !important;}

In the cell phone, the Widget Font remains Black and did not change to white like the website.
Please advise.

Hi Loren,

Is the cellphone widget a link? If so, try updating the CSS to:

/* Change Widget Color, weight, etc*/
.x-main .h-widget, .x-sidebar .h-widget,
.x-main .h-widget a, .x-sidebar .h-widget a {
    font-weight: 700;
    background-color: black;
    color: #fff;
    border-width: 3px; 
    border-color: #ffffff !important;
}

If this code does not work, there could be another CSS block that overrides the CSS code you are adding so kindly provide the link to the page where the phone widget is so that we can check.

Hope this helps.

Thank you, but that did not work.
Here are two of the links with widgets where the text is black instead of white on a mobile (android) device.
https://meadowstar.com/technology/recycled-light-inside/
https://meadowstar.com/rltproducts/rlt-fiber-optic-light-engine/

Hello Loren,

Thanks for updating the thread.

Please use following code under Pro > Theme Options > CSS:

.x-main .h-widget, .x-sidebar .h-widget,
.x-main .h-widget a, .x-sidebar .h-widget a {
    font-weight: 700;
    background-color: #000;
    color: #fff !important;
    border-width: 3px !important; 
    border-color: #ffffff !important;
}

Thanks.

That did the trick. Don’t use color: white, instead use hex code.

Hi Loren,

Glad to hear it’s sorted and white or #fff or #ffffff or rgb(255,255,255) are acceptable for color values.

The second suggestion worked because of the !important css property added to it that gives it the highest priority.

Hope this explains it.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.