Archived topic
Button css styling on mobile
5 replies · Started by Angie Hillcoat on June 2, 2017
Hi Tom,
I've added some CSS styling to buttons using the plugin Simple custom css:
/* form button style */
button, html input[type="button"], input[type="reset"], input[type="submit"], .button, .button:visited
{
color: #ff8300;
background-color: #ffffff;
border-style: solid;
border-width: 2px;
border-color: #ff8300;
border-radius: 10px;
}
button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, button:focus, html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button:focus
{
color: #ffffff;
background-color: #ff8300;
}
This works fine on desktop and landscape tablet - but reverts to standard theme colours on mobile and portrait tablet - am I missing something in my coding - is there a mobile specific class I need to address?
Thanks
Angie
Can you link me to a page with one of these buttons possibly?
Here you are Tom
Thanks for your speedy response - just heading off for the weekend now so no rush - back on it Monday,
Have a good weekend!
Angie
Hi Angie,
You have this code at the top of Simple CSS:
@media (min-width: 769px) {
.menu-item-float-right {
float: right;
}Which is missing a closing bracket for the media query and that makes all the CSS below apply to desktop only.
Fix it like this then it should be good to go.
@media (min-width: 769px) {
.menu-item-float-right {
float: right;
}
}Hi Leo,
Thanks so much - all working - just goes to show how careful you need to be when copying code!
Best,
Angie
This site is useful: https://jigsaw.w3.org/css-validator/#validate_by_input
You're welcome!
