[Resolved] Button css styling on mobile

Home Forums Support [Resolved] Button css styling on mobile

Home Forums Support Button css styling on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #327695
    Angie Hillcoat

    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

    #327728
    Tom
    Lead Developer
    Lead Developer

    Can you link me to a page with one of these buttons possibly?

    #327735
    Angie Hillcoat

    Here you are Tom

    https://dotcoop.wpengine.com/

    Thanks for your speedy response – just heading off for the weekend now so no rush – back on it Monday,

    Have a good weekend!

    Angie

    #327740
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #328650
    Angie Hillcoat

    Hi Leo,

    Thanks so much – all working – just goes to show how careful you need to be when copying code!

    Best,
    Angie

    #328799
    Leo
    Staff
    Customer Support

    This site is useful: https://jigsaw.w3.org/css-validator/#validate_by_input

    You’re welcome!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.