Widget CSS
-
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
-
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 TomanThanks, 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
The colours in the image are correct. But on mobile, the buttons use their default colours.Regards,
BalazsThank 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 TomanNo, sorry, it’s not that. Everything under @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;
}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
#wrapperID 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 TomanYeeeeah! 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
The topic ‘Widget CSS’ is closed to new replies.
