Cartthrob 2.70's Auto-Install Template issue with Bootstrap and Affix

Question

I recently installed Cartthrob version 2.70. I used the auto-install templates during installation and have been altering them to suit my needs from there but I can't seem to fix a problem with the store's left nav (the div that includes the total, subtotal, discounts, etc.) When the store is viewed on a tablet or mobile device, this left nav follows the page as you scroll down and completely overlaps the content underneath it.

I'm new to Bootstrap but all my research and reading has lead me to believe that the issue has something to do with Affix. I assumed if the screen width was small enough, the div wouldn't scroll and would remain fixed at the top of the page. I'm also not sure if the problem is on the css or javascript side (or both). Has anyone else noticed the same issue and if so, is there an easy resolution? Thank you!

Answer 1

I was able to solve this problem with a better understanding of how Scrollspy and Affix work. I didn't realize that you needed to account for smaller screen sizes within the CSS. Adding this to my stylesheet solved my problem:

@media (min-width: 768px) {
    .bs-docs-sidenav {
        position: fixed;
    }
}

The answer came from this thread: https://stackoverflow.com/questions/17394854/how-can-i-disable-bootstraps-affix-on-smaller-screens

Hope this helps someone else!