eliminate large gap in widget on small screens

There is a statement in the CSS:

@media only screen and (max-width: 1023px) {
  .content-sidebar .content, 
  .sidebar-content .content {
    margin-bottom: 80px;
  }
}

Select allOpen in new window

Modifying or removing that will remove the extra white-space.

When I look at your beta page, I see that the gap is caused by the following CSS:

@media only screen and (max-width: 1023px)
style.css?ver=1.0.0:2359
.content-sidebar .content, .sidebar-content .content {
    margin-bottom: 80px;
}

Select allOpen in new window

On line 2360 of the file style.css located in the following folder structure:
wp-content
->themes
---->monochrome-pro

Set that to 0px, and see if that fixes the issue for you.  To be certain that it isn't affecting anything else, check your page at different sizes.  You may need to more narrowly focus the CSS via media calls with different max-widths set to achieve perfection.

I added the following to my css and it had no effect.  I even tried using a private window. No change.  

@media only screen and (max-width: 1023px)  {
.content-sidebar .content, .sidebar-content .content {
    margin-bottom: 0px; }
}

Select allOpen in new window

Read my comment above, and alter the specific line and file that I specified.  Let me know if that works.