Our notification bar not works on mobile devices as expected

We have our website in wordpress, below is the link for your reference.

https://timesandtrendsacademy.com/

There is one foobar which is shown at the bottom of every page of our website in sticky and scrolling mode. I have put some custom css for the same for full width look, below for your reference,

.foobar-container-left{display:none;}
.foobar-container-right{display:none;}
#foobar-message-0{width:100%;}

@media only screen and (max-width:500){
#branches{width:100%;}
}

It's working perfect on desktop, but when we resizing our screen or when we open on mobile devices that width is not taking a full-width. It is showing in a 150px width size that is not looking good in mobile devices.

we have to add some css or media query to reflect proper on all the devices.

Please advice us.

Thanks, Gopal

Solution

That's because there's a style with a !important that overwrites your styles.

@media only screen and (max-width: 800px) and (min-width: 320px) {
    #foobar-message-0 {
        margin-top: 10px;
        width: 150px!important;
    }
}

Remove the !important, edit the style, or use a more specific selector with !important.

Example:

@media only screen and (max-width: 800px) {
    #foobar-message-0 {
        width: 100%!important;
    }
}

These styles should be after the styles to overwrite.