Edit Back to Top Button CSS code for mobile view only

  • Unknown's avatar
    funmidaniel0839cb6bd5 · Member ·

    I’ve successfully added code to my site to create a back to the top button. The button is on all screen sizes though and I’d like it to be for mobile view only. How do I edit the code?

    body {
    font-family: Work Sans, sans-serif;
    font-size: 16px;
    }

    #myBtn {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 99;
    font-size: 14px;
    border: none;
    outline: none;
    background-color: #FCC213;
    color: #020101;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
    }

    #myBtn:hover {
    background-color: #F7F7F7;
    }

    ▲

    //Get the button
    var mybutton = document.getElementById(‘myBtn’);

    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = ‘block’;
    } else {
    mybutton.style.display = ‘none’;
    }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    }

  • staff-blorbo · Staff ·

    I don’t see any WordPress.com sites under your account here.

    What is the URL of the site with the problem?

  • Unknown's avatar
    funmidaniel0839cb6bd5 · Member ·

    Hiya,

    It’s a wordpress.org site. The url is http://www.funmidaniel.com

    Thanks

  • aleone89 · Staff ·

    Hello there,

    It looks like funmidaniel.com is a self-hosted WordPress site with One,com, which is a bit different to a site hosted on WordPress.com. You can read about these differences here: https://en.support.wordpress.com/com-vs-org/

    You need to contact the theme developer about that styling – they should hopefully be able to provide you with the CSS that you need.

    I hope this helps.

  • Unknown's avatar
    funmidaniel0839cb6bd5 · Member ·

    Ok great, thanks for the clarification.

  • The topic ‘Edit Back to Top Button CSS code for mobile view only’ is closed to new replies.