How can I adjust the width of a gallery image in squarespace?

Hi! Site password is: jfk

in the new york portfolio, I have three gallery images that look exactly how I want, but below I have another "collection" that only has one image. How can I make it so that it is the same width as the top photos and is also centered. I want to make multiple collections like this but some of them will have 2 images and some will have 3. is there a solution for this? 

Thank you!

Website url: https://apple-rectangle-8kzl.squarespace.com/new-york

4 hours ago, Web_Solutions said:

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

@media only screen and (min-width: 768px) {
    #collection-658f637dfaad4c5073dd951e .gallery-grid--layout-grid .gallery-grid-wrapper {
        display: flex !important;
        justify-content: center !important;
    }
    #collection-658f637dfaad4c5073dd951e .gallery-grid--layout-grid .gallery-grid-wrapper .gallery-grid-item {
        flex: 0 0 33.3333% !important;
    }
}

 

That is unbelievable! Thank you so much... Just two more questions, is it possible so that on the mobile view, the images will actually show in a different aspect ratio? Maybe 1:1... Also, how did you learn this? Or how did you get to the solution if it's explainable. I really wish I could learn this.

14 minutes ago, Sahibsahib said:

That is unbelievable! Thank you so much... Just two more questions, is it possible so that on the mobile view, the images will actually show in a different aspect ratio? Maybe 1:1... Also, how did you learn this? Or how did you get to the solution if it's explainable. I really wish I could learn this.

About image ratio on mobile. Do you want 1:1 ratio on mobile? And I'm working on this section last 4 years. Do you have any coding knowledge?

On 1/4/2024 at 12:56 AM, Web_Solutions said:

About image ratio on mobile. Do you want 1:1 ratio on mobile? And I'm working on this section last 4 years. Do you have any coding knowledge?

Yes, I know how to code in java. Also yes, I was hoping to have 1:1 on mobile only.

Thank you!

6 hours ago, Sahibsahib said:

Yes, I know how to code in java. Also yes, I was hoping to have 1:1 on mobile only.

Thank you!

Add this code for mobile ratio 

@media only screen and (max-width: 767px) {
    #collection-658f637dfaad4c5073dd951e .gallery-grid--layout-grid .gallery-grid-item .gallery-grid-item-wrapper {
        padding-bottom: 100% !important;
    }
}

Please I make use of this code to fix same issues am having on my website... but it not working.. what can i do..

3 hours ago, Morgan_leon said:

Please I make use of this code fix to same issues am having on my website... but it not working.. what can i do..

Can you share the page link?

here is the page https://trumpet-eagle-t7km.squarespace.com/our-leadership

pw: 1234567

16 hours ago, Web_Solutions said:

Can you share the page link?

Have send the information needed, your help is highly needed.... Thank you

2 hours ago, Morgan_leon said:

Have send the information needed, your help is highly needed.... Thank you

I can see you have added some code on the Custom CSS section. Please remove it and add the code below.

@media screen and (min-width:1024px) {
    .user-items-list-item-container[data-section-id="65e3e8a904823f497f920186"] li.list-item {
        position: relative;
        width: 33% !important;
        margin: 0 auto !important;
    }
}
@media screen and (min-width:768px) and (max-width: 1023px){
    .user-items-list-item-container[data-section-id="65e3e8a904823f497f920186"] li.list-item {
        position: relative;
        width: 50% !important;
        margin: 0 auto !important;
    }
}