Center Align Grid Gallery Content | For Logos

Hi there,

I'm trying to center some logos which are in a gallery block. Specifacly when there are less images in a row.

Just like in this discription : https://www.ghostplugins.com/steps/center-last-images-grid-gallery-block

Somehow this code doesn't work for me and I really don't know why.

This is my page and at the bottom is the gallery block with some logos: https://www.maximfischer.de/work/spec-ad-porsche-taycan

Hi,

You mean center this?

On 11/4/2023 at 11:42 AM, tuanphan said:

Hi,

You mean center this?

Hi tuanphan,

yes correct.

Hi,

I supposed you can just manually center them as objects on the fluid grid. If you are doing a simple list item, they will default to left alignment. Some custom code in the page header you can use for centering is as follows: Just replace the section ID with your specific section ID. 

<style>
/*center elements - cane*/
  section[data-section-id="6553fb75f983e40f4b5ed4e2"] .user-items-list-item-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: start !important;
    justify-content: center !important;
  }
  section[data-section-id="6553fb75f983e40f4b5ed4e2"] .user-items-list-item-container .list-item {
    width: 25% !important;
    min-width: 260px !important;
  }
  </style>

You can also try this CSS code (Website > Website Tools > Custom CSS)

/* center gallery items */
@media screen and (min-width:768px) {
[data-section-id="64ff143e50c1aa4325121d83"] figure:nth-child(n+1) {
    position: relative;
    left: calc(~"100% + 7.5vw");
}
}

On 11/17/2023 at 6:56 PM, elschwartzo said:

Hi,

I supposed you can just manually center them as objects on the fluid grid. If you are doing a simple list item, they will default to left alignment. Some custom code in the page header you can use for centering is as follows: Just replace the section ID with your specific section ID. 

<style>
/*center elements - cane*/
  section[data-section-id="6553fb75f983e40f4b5ed4e2"] .user-items-list-item-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: start !important;
    justify-content: center !important;
  }
  section[data-section-id="6553fb75f983e40f4b5ed4e2"] .user-items-list-item-container .list-item {
    width: 25% !important;
    min-width: 260px !important;
  }
  </style>

 

Unfortunately I own only the base subscription of Squarespace so I can't place the code in my header, but thank you anyways.

8 hours ago, tuanphan said:

You can also try this CSS code (Website > Website Tools > Custom CSS)

/* center gallery items */
@media screen and (min-width:768px) {
[data-section-id="64ff143e50c1aa4325121d83"] figure:nth-child(n+1) {
    position: relative;
    left: calc(~"100% + 7.5vw");
}
}

 

Thank you,

this CSS code worked for me.

Is there a way to downsize images for the mobile version? Right know each image uses 50% of the screen space.

On 11/19/2023 at 6:57 PM, Maxter said:

Thank you,

this CSS code worked for me.

Is there a way to downsize images for the mobile version? Right know each image uses 50% of the screen space.

Use this CSS code

/* 4 images at bottom of page */
@media screen and (max-width:767px) {
[data-section-id="64ff143e50c1aa4325121d83"] .gallery-grid-wrapper {
    grid-template-columns: repeat(4,1fr) !important;
    display: grid !important;
}
}

Thank you tuanphan.

On 11/19/2023 at 4:27 AM, tuanphan said:

You can also try this CSS code (Website > Website Tools > Custom CSS)

/* center gallery items */
@media screen and (min-width:768px) {
[data-section-id="64ff143e50c1aa4325121d83"] figure:nth-child(n+1) {
    position: relative;
    left: calc(~"100% + 7.5vw");
}
}

 

I just noticed this code works only if there are exactly 4 images in the grid gallery. At the bottom of this page:

https://www.maximfischer.de/work/the-artist-bachelor-project-3d-animation

I have 8 images in a row of 6. The last two images in the second row should be then centered. And it would be perfect if for example there are only 3 images that get automaticly centered without calculating the viewport width.

I think this css code should solve this but I couldnt get it to work with my sites:

// Center Last Images - Grid Gallery Block //

.sqs-gallery-block-grid .sqs-gallery-design-grid {
  flex-wrap: wrap !important;
  display: flex !important;
  justify-content: center !important;
}

3 hours ago, tuanphan said:

Use flex or the code I sent, you will also need a different code for each page, there is no universal code for all

Use flex, you will need to set width of 8 items

I tried to integrate the code as followed:

@media screen and (min-width:768px) {
[data-section-id="655df279319bf92e4ef467d2"] .gallery-grid--layout-grid .gallery-grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
}

but then all the images disappear. I'm sorry if I ask too much. 

You forgot this code (I sent 2 screenshots in above comment)

Ops. I saw that piece of code but when I tried to implement it, nothing changed. I did it wrong.
Now I corrected it and it works:

@media screen and (min-width:768px) {
[data-section-id="655df279319bf92e4ef467d2"] .gallery-grid--layout-grid .gallery-grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
figure.gallery-grid-item {
    width: 8%;
  }
}
}

Thank you so much! You made my day