Make rows for 1 column portfolio grid 50% of page height.

Site URL: https://www.alxhtchr.com/vault-2

I've created a portfolio grid gallery and worked the code so that it has 1 column without left or right padding; however, I've been trying for hours to find code that will allow the row to be cropped vertically to 50% of the page (if I were to have 2 rows and header hidden you could see their entirety). I want the aspect ratio to be variable so that as the browser window size changes, so does the crop on the photo to remain at 50% of the vertical height. The code I attached in the image has not successfully worked in limiting the row height.

I'm looking to imitate this page https://www.shortstache.com/professional

Here is my page https://www.alxhtchr.com/vault-2

Would appreciate any help I can get, thanks!

Use this code

<style>
  @media screen and (min-width:768px) {
  .portfolio-grid-overlay .grid-item {
    padding-bottom: 20% !important;
}
  }
</style>

5 hours ago, tuanphan said:

Use this code

<style>
  @media screen and (min-width:768px) {
  .portfolio-grid-overlay .grid-item {
    padding-bottom: 20% !important;
}
  }
</style>

 

I used this code and it seems to change the aspect ratio but it doesn't make it relative to the screen size. I attached a few images of the site I'm trying to imitate at a couple of different window aspect ratios to accentuate the perks of the design I'm trying to achieve. Here you can see the image crop changes to fit the 50% vertical height (disregard the additional height of the header which disappears when you scroll) and the full width of the page at all times. Check out https://www.alxhtchr.com/vault-2 to see how the applied code affected the site. Thanks for all the help, this is still the biggest step I've made in the right direction!