Images all the same height on mobile and Newsletter block amends

Site URL: https://hen-koala-78xc.squarespace.com/

On mobile view I'd like all the images to be the same height. Does anyone know how to do this? (see pics)

I'd also like to amend the newsletter block on the footer, the boxes are too big (I'd like them thinner height-wise) and I'd like the button to be the same size as the 'get in touch' button above. Can anyone help with this?

Where are the images located? I dont see on home

sorry on the work page (which is set to my home page) I have 6 images - Daisy bakes, LDM etc. When you click on those pages - thank you

25 minutes ago, CatherineG said:

sorry on the work page (which is set to my home page) I have 6 images - Daisy bakes, LDM etc. When you click on those pages - thank you

Since these section are individuals I need to get their id, so you can use Find Squarespace Ids plugin for that, Here is the final custom css

@media screen and (max-width: 768px) {
    section[data-section-id="5fa540fbb4432e3d381e5585"] .sqs-block-image-figure > div,
    section[data-section-id="5fa53c6145328a7d12787d97"] .sqs-block-image-figure > div, 
    section[data-section-id="5fa53ecd8f6823481cfcb906"] .sqs-block-image-figure > div 
    section[data-section-id="5fa5453b8f6823481cfd7d3b"] .sqs-block-image-figure > div,
    section[data-section-id="5fa55f6860622a1964c637c8"] .sqs-block-image-figure > div,
    section[data-section-id="5fa5638af3540671e58f0962"]  .sqs-block-image-figure > div {
      padding-bottom: 50% !important;
  }
    section[data-section-id="5fa540fbb4432e3d381e5585"] .sqs-block-image-figure > div .thumb-image,
    section[data-section-id="5fa53c6145328a7d12787d97"] .sqs-block-image-figure > div .thumb-image,
    section[data-section-id="5fa53ecd8f6823481cfcb906"] .sqs-block-image-figure > div .thumb-image,
    section[data-section-id="5fa5453b8f6823481cfd7d3b"] .sqs-block-image-figure > div .thumb-image,
    section[data-section-id="5fa55f6860622a1964c637c8"] .sqs-block-image-figure > div .thumb-image,
    section[data-section-id="5fa5638af3540671e58f0962"] .sqs-block-image-figure > div .thumb-image {
      height: auto !important;
      top: 50% !important;
      transform: translateY(-50%);
  }
}

Thank you so much! Is there anyway that they can be the same size (height wise) as the 2nd, 3rd, 4th images? Ideally, I'd like to make the top image a bit deeper so it's the same height as the other images. Sorry I should have made that clear from the start.

9 minutes ago, CatherineG said:

Thank you so much! Is there anyway that they can be the same size (height wise) as the 2nd, 3rd, 4th images? Ideally, I'd like to make the top image a bit deeper so it's the same height as the other images. Sorry I should have made that clear from the start.

I tried that but the top image have not enough height, so I have to change the dimension to 50%, if you can update the top image to have the same dimension with other you can update the code, like so

Thank you @bangank36 I don't suppose you know the answer to my other question about the newsletter block? 

I'd also like to amend the newsletter block on the footer, the boxes are too big (I'd like them thinner height-wise) and I'd like the button to be the same size as the 'get in touch' button above. Can anyone help with this?

@bangank36  just to let you know I've put the site to live so the link is now https://www.catherinegiaquinto.co.uk/

6 hours ago, CatherineG said:

@bangank36  just to let you know I've put the site to live so the link is now https://www.catherinegiaquinto.co.uk/

@media only screen and (min-width: 600px) {
  .newsletter-form-body {
    display: flex;
    align-items: center;
  }
}

.newsletter-block .newsletter-form-button {
  padding: .5em 1.169em !important;  
  min-width: 120px !important;  
}
.newsletter-block .newsletter-form-button .newsletter-form-button-label {
   font-size: .9rem; 
    font-weight: 400;
}

@bangank36

Thank you! That has altered the button size but not the boxes, do you have some code to make the boxes much shorter (like in the picture attached)

6 minutes ago, CatherineG said:

@bangank36

Thank you! That has altered the button size but not the boxes, do you have some code to make the boxes much shorter (like in the picture attached)

.newsletter-block .newsletter-form-field-element, .newsletter-block .newsletter-form-button {
	padding: .7em 1.169em !important;
}

Thank you so much! that's perfect! Thank you for all your help @bangank36