Center Align Portfolio Grid Simple Blocks

Site URL: http://www.surmountpictures.com/clients

I am trying to centre the portfolio grid blocks to create a better looking web page with an uneven amount of portfolio grid elements. I would like for the last row (since they are rows of 3) to be centred because it doesn't have enough

What CSS or coding can I add to centre align the portfolio blocks?

On 1/20/2022 at 10:07 AM, bangank36 said:

Try adding to Home > Design > Custom Css

section[data-section-id="61e20593650682182d5743a1"] .grid-item {
  grid-column: span 2;
}

section[data-section-id="61e20593650682182d5743a1"] .grid-item:last-child:nth-child(3n - 2) {
  grid-column-end: 5;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Yes is worked! Thank you!

I only used:

section [data-section-id="61e20593650682182d5743a1"] .grid-item:last-child:nth-child(3n - 2) {
  grid-column-end: 3;
}

as I found the first part of the coding resized the grid items.

Thank you!

Hi, I'm having the same issue where I would like to centre align the portfolio grid blocks to create a better looking web page with an uneven amount of portfolio grid elements. I tried the above CSS but unfortunately, it didn't work.

Here is the link to the page : https://www.nmeplastic.com/themanual

Thanks so much!

On 9/16/2022 at 8:15 PM, Jack2406 said:

Hi, I'm having the same issue where I would like to centre align the portfolio grid blocks to create a better looking web page with an uneven amount of portfolio grid elements. I tried the above CSS but unfortunately, it didn't work.

 

Here is the link to the page : https://www.nmeplastic.com/themanual

Thanks so much!

You mean center item 10?

Yes Item 10 labelled #TheRightBin.

Thanks!

12 hours ago, Jack2406 said:

Yes Item 10 labelled #TheRightBin.

Thanks!

Add to Design > Custom CSS

@media screen and (min-width:992px) {
div#gridThumbs>a:nth-child(10) {
    position: relative;
    left: calc(~"100% + 78px") !important;
}
}

Nice one, thanks!

Hey,

I also have the same question, although ideally i want the css to affect the last row, no matter how many items are in the grid. It is a page that may change often so it wouldn't be great to have to go in and edit the CSS code every time new items are added to the grid.

Site: https://uor.squarespace.com/talent (password: uor123)

Thanks so much

On 2/13/2023 at 3:47 PM, hannah.dossary said:

Hey,

I also have the same question, although ideally i want the css to affect the last row, no matter how many items are in the grid. It is a page that may change often so it wouldn't be great to have to go in and edit the CSS code every time new items are added to the grid.

Site: https://uor.squarespace.com/talent (password: uor123)

 

Thanks so much

 

Add to Design > Custom CSS

@media screen and (min-width:768px) {
body#collection-6388a141e8549d5191e07363 div#gridThumbs .grid-item:nth-last-child(-n+2) {
    position: relative;
    left: calc(~"100% + 30px");
}
}

On 9/21/2022 at 12:41 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (min-width:992px) {
div#gridThumbs>a:nth-child(10) {
    position: relative;
    left: calc(~"100% + 78px") !important;
}
}

 

Hi, this has helped me with one of of my portfolio pages but how do i make it so it only affects that one page not any others? 

Any help would be lovely, thank you.

On 9/21/2023 at 8:38 PM, NebErino said:

Hi, this has helped me with one of of my portfolio pages but how do i make it so it only affects that one page not any others? 

Any help would be lovely, thank you.

This code affects Item 10 only of all portfolio pages

You can share link to one of your portfolio page, we can check & add an ID before the code, so it will run for that portfolio page only

On 9/23/2023 at 10:11 AM, tuanphan said:

This code affects Item 10 only of all portfolio pages

You can share link to one of your portfolio page, we can check & add an ID before the code, so it will run for that portfolio page only

https://conch-octopus-dfx7.squarespace.com/rod-seals

like i said, the code works but i have multiple portfolio pages and they have different quantities, so im trying to change items 13 and 14 on this page 

If you could give me a hand in how to set a piece of code for just one page that would be great,

Thank you.

On 10/5/2023 at 8:30 PM, NebErino said:

https://conch-octopus-dfx7.squarespace.com/rod-seals

like i said, the code works but i have multiple portfolio pages and they have different quantities, so im trying to change items 13 and 14 on this page 

If you could give me a hand in how to set a piece of code for just one page that would be great,

Thank you.

The page is private. Can you check it again?

On 10/7/2023 at 10:41 AM, tuanphan said:

The page is private. Can you check it again?

https://conch-octopus-dfx7.squarespace.com/products

Sorry im still very very new to squarespace, I hope this one works.

Just again, im trying to move item 9 and 10 to the center but it changes item 9 and 10 on a different portfolio page that i have.  Any help would be great , thank you. 

(if this link doesnt work please let me know how to make it not private i can't see it anywhere in the settings.)

On 10/9/2023 at 2:29 PM, NebErino said:

https://conch-octopus-dfx7.squarespace.com/products

Sorry im still very very new to squarespace, I hope this one works.

Just again, im trying to move item 9 and 10 to the center but it changes item 9 and 10 on a different portfolio page that i have.  Any help would be great , thank you. 

(if this link doesnt work please let me know how to make it not private i can't see it anywhere in the settings.)

The site is private. You can follow this to know how to share correct url

On 10/12/2023 at 9:51 AM, tuanphan said:

The site is private. You can follow this to know how to share correct url

 

https://conch-octopus-dfx7.squarespace.com/rod-seals

Ok, im 99% sure that it is password protected now, the password is: Rhon2023

Thank you for your patience and for all the help that you give to everyone. 

On 10/16/2023 at 4:29 PM, NebErino said:

https://conch-octopus-dfx7.squarespace.com/rod-seals

Ok, im 99% sure that it is password protected now, the password is: Rhon2023

Thank you for your patience and for all the help that you give to everyone. 

Add to Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width:768px) {
body#collection-650c3878cc3eec7453b2924b a.grid-item:nth-child(n+13) {
    position: relative;
    left: calc(~"100% + 30px");
}}

On 10/18/2023 at 3:51 AM, tuanphan said:

Add to Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width:768px) {
body#collection-650c3878cc3eec7453b2924b a.grid-item:nth-child(n+13) {
    position: relative;
    left: calc(~"100% + 30px");
}}

This has worked beautifully, thank you very much for your help.

I've tried using a similar method for this page : 

https://conch-octopus-dfx7.squarespace.com/materials-2

password: Rhon2023

This is to align the final "person" to the middle of the screen, but it doesn't seem to be working. If you could help out again that would be brilliant.

Thank you.

On 10/20/2023 at 8:30 PM, NebErino said:

This has worked beautifully, thank you very much for your help.

I've tried using a similar method for this page : 

https://conch-octopus-dfx7.squarespace.com/materials-2

password: Rhon2023

This is to align the final "person" to the middle of the screen, but it doesn't seem to be working. If you could help out again that would be brilliant.

Thank you.

Try this code

/* Materials 2 */
@media screen and (min-width:768px) {
body#collection-651fce523ddc2605572b7a52 li.list-item:nth-child(n+13) {
    position: relative;
    left: calc(~"175% + 100px");
}}