bkwebsite Posted January 19, 2022 Share Posted January 19, 2022 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? Link to comment
Solution Beyondspace Posted January 20, 2022 Solution Share Posted January 20, 2022 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? 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
bkwebsite Posted January 23, 2022 Author Share Posted January 23, 2022 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! tuanphan 1 Link to comment
Jack2406 Posted September 16, 2022 Share Posted September 16, 2022 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! Link to comment
tuanphan Posted September 18, 2022 Share Posted September 18, 2022 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
Jack2406 Posted September 20, 2022 Share Posted September 20, 2022 Yes Item 10 labelled #TheRightBin. Thanks! Link to comment
tuanphan Posted September 20, 2022 Share Posted September 20, 2022 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
hannah.dossary Posted February 13, 2023 Share Posted February 13, 2023 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 Link to comment
tuanphan Posted February 15, 2023 Share Posted February 15, 2023 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
NebErino Posted September 21, 2023 Share Posted September 21, 2023 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
tuanphan Posted September 23, 2023 Share Posted September 23, 2023 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
NebErino Posted October 5, 2023 Share Posted October 5, 2023 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
tuanphan Posted October 7, 2023 Share Posted October 7, 2023 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
NebErino Posted October 9, 2023 Share Posted October 9, 2023 (edited) 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 October 9, 2023 by NebErino Link to comment
tuanphan Posted October 12, 2023 Share Posted October 12, 2023 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
NebErino Posted October 16, 2023 Share Posted October 16, 2023 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. Link to comment
tuanphan Posted October 18, 2023 Share Posted October 18, 2023 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"); }} 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
NebErino Posted October 20, 2023 Share Posted October 20, 2023 (edited) 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. Edited October 20, 2023 by NebErino Link to comment
tuanphan Posted October 23, 2023 Share Posted October 23, 2023 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment