Mao325 Posted February 11, 2021 Share Posted February 11, 2021 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 Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 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> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Paul_KD Posted February 18, 2021 Share Posted February 18, 2021 (edited) 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 (¬‿¬ ) Edited February 18, 2021 by PaulyM Link to comment
tuanphan Posted February 19, 2021 Share Posted February 19, 2021 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. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Christiaan Posted May 12, 2021 Share Posted May 12, 2021 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? Link to comment
tuanphan Posted May 14, 2021 Share Posted May 14, 2021 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% Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kasiakalasia Posted November 26, 2021 Share Posted November 26, 2021 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? Link to comment
tuanphan Posted November 28, 2021 Share Posted November 28, 2021 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> AndyKhouri 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kasiakalasia Posted December 2, 2021 Share Posted December 2, 2021 Thank you @tuanphan. Where should I post it? Link to comment
tuanphan Posted December 4, 2021 Share Posted December 4, 2021 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AMenin Posted December 19, 2021 Share Posted December 19, 2021 @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 Link to comment
tuanphan Posted December 22, 2021 Share Posted December 22, 2021 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AndyKhouri Posted October 6, 2022 Share Posted October 6, 2022 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. tuanphan 1 Link to comment
JadenDuong Posted April 2 Share Posted April 2 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? Link to comment
tuanphan Posted April 5 Share Posted April 5 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. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Caleb013 Posted July 4 Share Posted July 4 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 Link to comment
Caleb013 Posted July 4 Share Posted July 4 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> creedon and tuanphan 2 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment