How to add padding between load more and sidebar-2 position in mobile view.

You can use this custom css:

@media (max-width: 767px){
.t3-content {
    padding-bottom: 15px;
}
}

Where do I add this custom css ?

You can put into: /templates/ja_magz_ii (your default template)/css/custom.css (Create this file if it doesn't exist now)

Coming back to this, I tried the code you suggested above but the site still has the load more sticking to the top of the next section:

There is also a padding issue on the first article (leading article) on the left and right as below

You can change above code:

@media (max-width: 767px){
.t3-content {
    padding-bottom: 15px;
}
}

To:

.t3-content {padding-bottom: 15px;}