Jump to content

Center Align Portfolio Grid Simple Blocks

Go to solution Solved by Beyondspace,

Recommended Posts

  • Solution
20 hours ago, bkwebsite said:

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?

 

Screen Shot 2022-01-19 at 1.49.07 PM.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment
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!

 

 

Link to comment
  • 7 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
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");
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
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.

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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.

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.)

Edited by NebErino
Link to comment
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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");
}}

image.thumb.png.fe705468a6485b7d673c85ddd37286eb.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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");
}}

image.thumb.png.fe705468a6485b7d673c85ddd37286eb.png

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.

Edited by NebErino
Link to comment
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");
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.