Using a different aspect ratio in the different gallery page

Site URL: https://www.maomiyakoshi.com/

Hi, I am creating the styling portfolio website. Is there any way I can use a different aspect ratio for each page? I would like to keep 3:4 (vertical) for fashion page, and 16:9 Widescreen for Moving image.

If anyway could help me, it's much appreciated x

Thank you so much!

Website: https://www.maomiyakoshi.com/
Password: maomiyakoshi

Fashion page ( 3:4 (vertical) )
https://www.maomiyakoshi.com/fashion

Moving images ( 16:9 Widescreen )
https://www.maomiyakoshi.com/moving-images

Add to Moving Images Page Header

<style>
  .tweak-portfolio-grid-overlay-image-aspect-ratio-34-three-four-vertical .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-34-three-four-vertical .portfolio-grid-overlay .grid-item {
    padding-bottom: 56.25% !important;
}
</style>

Hi, I am having the same issue as you @Mao325 I have tried adding the code to the page header but nothing seems to happen!? am I missing something?

Thanks (￢‿￢ )

18 hours ago, PMX said:

Hi, I am having the same issue as you @Mao325 I have tried adding the code to the page header but nothing seems to happen!? am I missing something?

Thanks (￢‿￢ )

If you use default setting is 3:4, you can use above code to change to 16:9

if you use another default ratio, above code won't work.

On 2/19/2021 at 2:44 PM, tuanphan said:

If you use default setting is 3:4, you can use above code to change to 16:9

if you use another default ratio, above code won't work.

What would the could be for default setting 1:1 and change it to 3:4 aspect ratio?

On 5/12/2021 at 8:04 PM, Christiaan said:

What would the could be for default setting 1:1 and change it to 3:4 aspect ratio?

133.333%

Hello! I'm facing the same problem... What a shame. What code should I use if I have a default aspect ratio 4:3 and I would like to change to 1:1?

On 11/26/2021 at 9:41 PM, kasiakalasia said:

Hello! I'm facing the same problem... What a shame. What code should I use if I have a default aspect ratio 4:3 and I would like to change to 1:1?

Try this

<style>
.portfolio-grid-overlay .grid-image, .portfolio-grid-overlay .grid-item {
    padding-bottom: 100% !important;
}
</style>

Thank you @tuanphan. Where should I post it? 

On 12/2/2021 at 4:26 PM, kasiakalasia said:

Thank you @tuanphan. Where should I post it? 

Add to Page Header (Page where you want to change aspect ratio)

If you use Personal Plan, please share page url, we can tweak the code easier

@tuanphan

Hi,

I am looking to have one gallery page with a 2:3 aspect ratio, and a second gallery page with 3:2.

How should I go about this? At the moment if I change one ratio, it changes both.

(I have a personal plan)

Site is unpublished at the moment so I can't share links.

Thanks

A

On 12/20/2021 at 12:02 AM, AMenin said:

@tuanphan

 

Hi,

I am looking to have one gallery page with a 2:3 aspect ratio, and a second gallery page with 3:2.

How should I go about this? At the moment if I change one ratio, it changes both.

(I have a personal plan)

Site is unpublished at the moment so I can't share links.

Thanks

A

Hi. If the site is private/trial, you can setup password & share url

You can setup 1:3 in general setting, then share link to second gallery, we will give the code to change it to 3:2

On 11/27/2021 at 11:22 PM, tuanphan said:

Try this

<style>
.portfolio-grid-overlay .grid-image, .portfolio-grid-overlay .grid-item {
    padding-bottom: 100% !important;
}
</style>

 

Just want to say thanks so much for this! It was a live saver. 

Hi, 

I'm having the same issue as Mao325.

I want to use separate portfolio pages -- one for photography (4:3 vertical) and one for film (16:9).

I have the Personal Plan for SquareSpace so I don't believe I have the ability to inject the code into the header. I've tried using the code in Custom CSS which did not work either.

I'm trying to troubleshoot a way to have my portfolio layouts be independent of each other without having them interfere with the layout of one another. 

Is there another solution or code I could use to solve this issue?

On 4/2/2023 at 2:03 PM, JadenDuong said:

Hi, 

I'm having the same issue as Mao325.

I want to use separate portfolio pages -- one for photography (4:3 vertical) and one for film (16:9).

I have the Personal Plan for SquareSpace so I don't believe I have the ability to inject the code into the header. I've tried using the code in Custom CSS which did not work either.

I'm trying to troubleshoot a way to have my portfolio layouts be independent of each other without having them interfere with the layout of one another. 

Is there another solution or code I could use to solve this issue?

Hi,

You can set 4:3 in setting then share link to page where you want to set 16:9, we can give CSS code for Personal Plan.

Hi there

All of my website is widescreen but I'd like one portfolio to have 3:4. What is the code for that?

Thanks in advance,

Caleb

Actually I sorted it. This is the code I used

<style>
.portfolio-grid-overlay .grid-image, .portfolio-grid-overlay .grid-item {
    padding-bottom: 133.33% !important;
}
</style>

Hi @tuanphan I have a similar request for my site.

I would like to use the portfolio page with 2:3 vertical aspect ratio for one page (https://cello-lute-gys4.squarespace.com/tv-series) and 16:9 widescreen aspect ratio for another page (https://cello-lute-gys4.squarespace.com/commercial).

Could you please give me the code to adjust this? I can add code into the page header.

Website password is "hellocrumpet"

Thanks in advance!

On 1/22/2024 at 10:20 AM, CrumpetClubhouse said:

Hi @tuanphan I have a similar request for my site.

I would like to use the portfolio page with 2:3 vertical aspect ratio for one page (https://cello-lute-gys4.squarespace.com/tv-series) and 16:9 widescreen aspect ratio for another page (https://cello-lute-gys4.squarespace.com/commercial).

Could you please give me the code to adjust this? I can add code into the page header.

Website password is "hellocrumpet"

Thanks in advance!

You can use this code to Website Tools > Custom CSS to change on /commercial page

body#collection-65a85fdd83e10e635b5d1787 .portfolio-grid-basic .grid-item .grid-image {
    padding-bottom: 56.25% !important;
}

On 1/25/2024 at 6:27 PM, tuanphan said:

You can use this code to Website Tools > Custom CSS to change on /commercial page

body#collection-65a85fdd83e10e635b5d1787 .portfolio-grid-basic .grid-item .grid-image {
    padding-bottom: 56.25% !important;
}

 

Thanks so much @tuanphan, this worked perfectly 🤩