Adjusting height of content sections on index pages

Hi there,

I'm using the Bedford theme and I've been trying to use a page section under an index page as a title. I've seen it resized on other Squarespace sites but cannot get the size of the content section for the title to change, it is far too big and there is no way to drag it to make it smaller.

I was able to get the top margin to adjust when inputting a negative value, but it looks terrible in mobile. Additionally, it appears there is no way to adjust the bottom margin, as doing the same just causes the content below it to overlap on top of the section above (I believe this is a collapsing margin issue).

I've attached an image below. Any help would be greatly appreciated, thank you!

For clarification, I'd ideally like it to display as the size in this screenshot

I found a solution, though it is not ideal - I couldn't get the div to resize responsively with the content contained in it so I just made hard tweaks to each display size. I am aware this may cause issues on non-conventional screen sizes so if anyone else has a better, responsive fix please let me know. Here is what I implemented below, where the div is the name of the title section contained within the Index for each page:

For Desktop:
 

#contact-header, #appearances-header, #journalism-header, #about-header, #home-header {
    min-height: unset !important;
    max-height: 180px;
    margin-top: -60px;
}

For Tablets:

@media screen and (min-width: 641px) and (max-width:950px) {
 #home-header {
  background-color: #223a5e;
  padding-top: 0px;
  padding-bottom: 50px;
  }
  #contact-header, #appearances-header, #journalism-header, #about-header {
  padding-top: 0px;
  }
}

For Phones:

@media screen and (max-width: 640px) {
 #home-header {
  padding-top: 50px;
  padding-bottom: 50px;
  }
  #contact-header, #appearances-header, #journalism-header, #about-header {
  padding-top: 50px;
  }
}

Below is the final result.