Reducing Size of Textbox

Hi there,

I am new to altering the CSS of my website so please forgive my poor explanation of my issue.

I have been messing around with the sizing of a slideshow and a small body of text which contains a button.

I have it looking how I want but for some reason the text box sizes seem to have large amount of empty padding and it is blocking my button from being clickable. I attached a photo which I hope shows what I mean.

If anyone can help adjust this with code it would be hugely appreciated. 

https://www.calumstevenson.co.uk/commission

Looks like you have something funky going on here, what code are you using on the website?

2 minutes ago, Ziggy said:

Looks like you have something funky going on here, what code are you using on the website?

.header-nav .header-nav-item--folder .header-nav-folder-content {
    min-width: auto;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: grey !important;
    transition-duration: 0.4s;
}
.header-actions-action.header-actions-action--social a:hover svg {
    fill: grey !important;
}
a#site-title:hover {
  color: grey;
}
.header-actions-action--cart .icon--cart:hover .icon--cart {
    stroke: grey !important;
}
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    text-align: left;
}
.gallery-strips[data-width="full"] {
    padding-top: 1px;
}
/* Huge spacing */
section.products.collection-content-wrapper.products-list {
    padding-top: 1px;
}
@media only screen and (min-width: 641px) {
  #collection-62f1115a8cd4cc13a9dd2bb7 {
    #page .page-section:nth-of-type(1) { /*second second on the left*/
      width: 43%;
      min-height: 80vh;
      max-width: 900px !important;
      align-items: center;
      float: left;
    }
    #page .page-section:nth-of-type(2) { /*third section on the right*/
      width: 57%;
      min-height: 100vh;
      align-items: Left;
    }
    #page .page-section:nth-of-type(3) { /* forth section full width again */
      clear: both;
    }
    #page .page-section:nth-of-type(2) { /*third section on the right*/
      max-height: 500px !important;
      max-width: 900px !important;
      overflow: hidden !important;
      align-items: Left;
    }
  }
}

I'm fairly sure the issue is my own doing... If there is a better way to do it please do let me know!

I can't see the problem... if you remove the CSS and then try and adjust the block heights does that work? (make sure to refresh the page in between and save the code somewhere!)

Where did you get this code? If it turns out to be a problem with this code you could try this plugin, I've not specifically tested it but everything that @WillMyers puts out is pure gold!

https://www.will-myers.com/products/p/split-screen-layout-design-pack

8 minutes ago, Ziggy said:

I can't see the problem... if you remove the CSS and then try and adjust the block heights does that work? (make sure to refresh the page in between and save the code somewhere!)

Yeah no issue when the custom CSS is removed. The code is an accumulation of things I have found on here over the past year or so. I have no idea what I am doing so it probably looks strange.

2 hours ago, Ziggy said:

Where did you get this code? If it turns out to be a problem with this code you could try this plugin, I've not specifically tested it but everything that @WillMyers puts out is pure gold!

https://www.will-myers.com/products/p/split-screen-layout-design-pack

Decided to give this plugin a go and it helped to some degree but I still have issues with placement and scale. for example the padding is huge, would you know how to alter this? New URL: https://www.calumstevenson.co.uk/commission-1

It looks like the gallery section has it's height set to L or 100vh.

9 minutes ago, Ziggy said:

It looks like the gallery section has it's height set to L or 100vh.

I removed all the code but the section remains with big spaces.

12 minutes ago, Ziggy said:

height set to L or 100vh

This section height is set in the section settings not in code.

1 minute ago, Ziggy said:

This section height is set in the section settings not in code.

You are a genius! Thank you.

1 minute ago, calumstevenson7 said:

You are a genius! Thank you.

Not really, I just know my way around Squarespace.

Can I give you this CSS to stop the header padding from shifting when you scroll (common issue):

.header .header-announcement-bar-wrapper, .tweak-fixed-header:not(.sqs-edit-mode-active):not(.sqs-site-styles-active) .header.shrink .header-announcement-bar-wrapper {
    padding-top: 2.2vw !important;
    padding-bottom: 2.2vw !important;
}

I can see that! Also yes thank you again that is much better.

I can see now that the height in the section settings alters my space at the top but when set to what I am looking for it greatly reduces the size of the gallery slideshow. Is there a way around this?

12 hours ago, calumstevenson7 said:

Is there a way around this?

Possibly, try adjusting the vertical padding with this:

.gallery-fullscreen-slideshow[data-width="full"] {
    padding: 2vw 7vw;
}

The 2vw is the vertical padding (top/bottom) and the 7vw is the horizontal padding.

That doesn't seem to be having an effect unfortunately.