[Share] Portfolio Page custom aspect ratio

You can use this CSS code to change Portfolio Page to custom ratio.

#1. Change aspect ratio on One Page

First, you need to find Portfolio Page ID.

In my example, it is: #collection-66a1bfc99041e47b896c1e48

Next, use this CSS code

#collection-66a1bfc99041e47b896c1e48 div.grid-image {
    padding-bottom: 75% !important;
}

If code run on Desktop Only, use this CSS code

@media screen and (min-width:768px) {
  #collection-66a1bfc99041e47b896c1e48 div.grid-image {
      padding-bottom: 75% !important;
  }
}

If code run on Mobile only

@media screen and (max-width:767px) {
  #collection-66a1bfc99041e47b896c1e48 div.grid-image {
      padding-bottom: 75% !important;
  }
}

#2. Change aspect ratio of 1 item
First, you need to find item url.
In my example, it is: /work-02/project-one-ephnc-hjaz3

Next, use this code to Custom CSS box

a.grid-item[href="/work-02/project-one-ephnc-hjaz3"] div.grid-image {
    padding-bottom: 75% !important;
}

If you want code affect on desktop only, use this new code

@media screen and (min-width:768px) {
   a.grid-item[href="/work-02/project-one-ephnc-hjaz3"] div.grid-image {
      padding-bottom: 75% !important;
  } 
}

If code runs on Mobile Only, use this CSS

@media screen and (max-width:767px) {
   a.grid-item[href="/work-02/project-one-ephnc-hjaz3"] div.grid-image {
      padding-bottom: 75% !important;
  } 
}

#3. All Pages - Mobile Only

To change aspect ratio on Mobile Only, you can use this CSS

@media screen and (max-width:767px) {
  div.grid-image {
      padding-bottom: 75% !important;
  }
}

#4. All Pages - Desktop Only
To change aspect ratio on Desktop Only, use this CSS

@media screen and (min-width:768px) {
  div.grid-image {
      padding-bottom: 75% !important;
  }
}