I can easily change the scrollbar colors for using the code below for PC's and laptops. I just put the code at the bottom of index.css. However, it does not work for responsive.css. How can I change it in responsive mode?

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #000000 #bd9851;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 15px;
  }

  *::-webkit-scrollbar-track {
    background: #bd9851;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #000000;
/*    border-radius: 5px; */
    border: 2px solid #8f6c2b;
  }
/*    *::-webkit-scrollbar-button {
      background-color:#f7a600;
  color: #000;
  } */
  /* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #000000 #bd9851;
  }

  /* Chrome, Edge, and Safari */
::-webkit-scrollbar {
      width: 16px;
      border: 5px solid #0e0e0e;

    }

    ::-webkit-scrollbar-thumb {
      background-color: #000;
      background-clip: padding-box;
      border: 0.05em solid #000;
    }

    ::-webkit-scrollbar-track {
      background-color: #bd9851;
    }
    /* Buttons */
    ::-webkit-scrollbar-button:single-button {
      background-color: #161515;
      display: block;
      border-style: solid;
      height: 13px;
      width: 16px;
    }
    /* Up */
    ::-webkit-scrollbar-button:single-button:vertical:decrement {
      border-width: 0 8px 8px 8px;
      border-color: transparent transparent #ffde74 transparent;
    }

    ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
      border-color: transparent transparent #ba964f transparent;
    }
    /* Down */
    ::-webkit-scrollbar-button:single-button:vertical:increment {
      border-width: 8px 8px 0 8px;
      border-color: #ffde74 transparent transparent transparent;
    }

    ::-webkit-scrollbar-button:vertical:single-button:increment:hover {
      border-color: #ba964f transparent transparent transparent;
    }

Somehow, when doing theme edits at WuB I changed the scroll bar by accident without using that code. Still not sure how I did that. It's back to normal now as that was awhile ago. Your code should work in responsive.css

Well, three's something else going on. LOL Look at the bottom of the site in FF, Opera, and Chrome. They all look different! The ".main_content_section" goes all the way to the bottom in FF but not the others. Furthermore, if you hover around the top of the Info Center in Opera it jumps leaving a big gap! LMAO

I don't know what the hell I did but I may have to crap this and start over.

Sometimes starting over is the best option.

Update: I didn't have to start over but I did take it to an earlier backup which fixed the issues in how it looked different in the various browsers. It was either in index.template.php or boardindex.template.php. Either way, the last issue is resolved. Whew! I did NOT want to start over again. LOL

Glad you solved that one.

Thanks. Now, I've got everything solved except for the mobile scroll bars and some other responsive issues.

I can't remember how I did it. It was a surprise to me when it happened.

Now I think maybe I uploaded the wrong version files or something. Anyhow, this is the same site that I had issues upgrading to 2.1.2! So something really weird was going on:

https://www.smfhelper.com/index.php?msg=8921

I just noticed that in the Default theme there's a file called: jquery.custom-scrollbar.css. That's probably the best place for it.