Title: Widget CSS
Last modified: August 22, 2016

---

# Widget CSS

 *  Resolved [BalazsTU](https://wordpress.org/support/users/balazstu/)
 * (@balazstu)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/widget-css-8/)
 * Hello Tomas,
 * I’m trying to set custom css for sidebar widgets, for example changing colours
   of buttons. And these work fine on pc but don’t work on mobile. Could you advise,
   please?
    Thank you.
 * Regards,
    Balazs

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Theme Author [TT Themes](https://wordpress.org/support/users/tomastoman/)
 * (@tomastoman)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/widget-css-8/#post-5644608)
 * Dear Balazs,
 * could you please post here a link to your website so I could view the buttons?
   The following custom CSS should work for the standard buttons in the right sidebar:
 *     ```
       #sidebar .sidebar-widget input[type="submit"],
       #sidebar .sidebar-widget input[type="reset"] {
       background-color: #000000 !important;
       color: #ffffff !important;
       }
       ```
   
 * Best regards,
    Tomas Toman
 *  Thread Starter [BalazsTU](https://wordpress.org/support/users/balazstu/)
 * (@balazstu)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/widget-css-8/#post-5644621)
 * Thanks, I think I tried this code yesterday and didn’t work.
    My site is balazstudlik.
   com And this shows which buttons use the wrong colours on mobile: [http://s24.postimg.org/y6npo4zz9/image.jpg](http://s24.postimg.org/y6npo4zz9/image.jpg)
   The colours in the image are correct. But on mobile, the buttons use their default
   colours.
 * Regards,
    Balazs
 *  Theme Author [TT Themes](https://wordpress.org/support/users/tomastoman/)
 * (@tomastoman)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/widget-css-8/#post-5644707)
 * Thank you for the link, I just have displayed your child theme’s style.css and
   it seems that there is missing a closing bracket at the end of the following 
   media query: `@media screen and (max-width: 1012px)`. This issue probably breaks
   all the other CSS rules located under it.
 * Best regards,
    Tomas Toman
 *  Thread Starter [BalazsTU](https://wordpress.org/support/users/balazstu/)
 * (@balazstu)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/widget-css-8/#post-5644716)
 * No, sorry, it’s not that. Everything under [@media](https://wordpress.org/support/users/media/)
   screen and (max-width: 1012px) works just fine. If I put that extra bracket there
   it totally messes up the layout.
    This is the part that doesn’t work on mobile:
 * .wysija-submit{
    background-color: red !important; font-size: 22px !important;}
 * .widget_sb_tabbed_widget ul.sb_tabs li a.tab-current {
    background: #437BD0; 
   color: #333333; }
 * .widget_sb_tabbed_widget ul.sb_tabs li a {
    background: #ffffff; -moz-box-shadow:
   inset 0 0 0px; -webkit-box-shadow: inset 0 0 0px; box-shadow: inset 0 0 0px; 
   color: #333333; font-size: 18px; font-family: Oswald, sans-serif; }
 *  Theme Author [TT Themes](https://wordpress.org/support/users/tomastoman/)
 * (@tomastoman)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/widget-css-8/#post-5644721)
 * It’s strange that your CSS doesn’t work on mobile devices, because it seems that
   the above posted code is valid. You can try to add the `#wrapper` ID at the start
   of each declaration to ensure that it will rewrite the default styles:
 *     ```
       #wrapper .wysija-submit {
        background-color: red !important;
        font-size: 22px !important;
        }
   
       #wrapper .widget_sb_tabbed_widget ul.sb_tabs li a.tab-current {
        background: #437BD0 !important;
        color: #333333 !important;
        }
   
       #wrapper .widget_sb_tabbed_widget ul.sb_tabs li a {
        background: #ffffff !important;
        -moz-box-shadow: inset 0 0 0px;
        -webkit-box-shadow: inset 0 0 0px;
        box-shadow: inset 0 0 0px;
        color: #333333 !important;
        font-size: 18px;
        font-family: Oswald, sans-serif;
        }
       ```
   
 * I also can recommend you to place the CSS into “Theme Options > Other Settings
   > Custom CSS” to test whether it could help.
 * If you still have the same problem, then please try to refresh your mobile browser
   and empty cache/cookies, because when I view your website on my PC and just reduce
   the width of the browser window to less than 1000px, the “Subscribe” button keeps
   the same colors (red background, white text), so it seems that it works fine 
   in this way.
 * Best regards,
    Tomas Toman
 *  Thread Starter [BalazsTU](https://wordpress.org/support/users/balazstu/)
 * (@balazstu)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/widget-css-8/#post-5644726)
 * Yeeeeah! Pasting the code into “Theme Options > Other Settings > Custom CSS” 
   solved it.
    Adding #wrapper didn’t work but it’s just perfect now. Thank you 
   very much again!
 * Regards,
    Balazs

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Widget CSS’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/songwriter/2.0.5/screenshot.png)
 * SongWriter
 * [Support Threads](https://wordpress.org/support/theme/songwriter/)
 * [Active Topics](https://wordpress.org/support/theme/songwriter/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/songwriter/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/songwriter/reviews/)

## Tags

 * [widget css](https://wordpress.org/support/topic-tag/widget-css/)

 * 6 replies
 * 2 participants
 * Last reply from: [BalazsTU](https://wordpress.org/support/users/balazstu/)
 * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/widget-css-8/#post-5644726)
 * Status: resolved