Jump to content

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

Recommended Posts

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!

Screen Shot 2022-06-21 at 1.02.38 PM.png

Screen Shot 2022-06-21 at 1.02.55 PM.png

Screen Shot 2022-06-21 at 2.24.43 PM.png

Edited by AlexHatcher
Link to comment
  • Replies 2
  • Views 278
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

5 hours ago, tuanphan said:

Use this code

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


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! 

Screen Shot 2022-06-22 at 10.11.59 AM.png

Screen Shot 2022-06-22 at 10.12.26 AM.png

Screen Shot 2022-06-22 at 10.12.40 AM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.