Centre Align List Section When Max Columns Number is Greater Than the Number of Content Items

Hello,

I'm looking to centre align all of my list section's content items as currently they default to aligning left when the maximum number of items is not met (i.e., currently I have the max set to 4 -- but, I only have 3 content items in the screenshot example shown below). I've tried searching Google and this forum and have so far not came across some CSS code that works.

Unfortunately, due to company policy I am not able to directly share the website (it is currently unpublished as well) -- my apologies for any inconvenience this may cause but any help is greatly appreciated, thank you!

You can duplicate the site, remove all content, excerpt list section, then share url, we can check easier

or create a new trial site, setup same list section, then share url

On 3/19/2022 at 2:00 AM, tuanphan said:

You can duplicate the site, remove all content, excerpt list section, then share url, we can check easier

or create a new trial site, setup same list section, then share url

Hi!

Thank you for your assistance:

The link to the website page is: https://cello-jaguar-jj9f.squarespace.com/ecological

and the Password is: C@r50N

On 3/23/2022 at 2:31 AM, JJL said:

Hi!

Thank you for your assistance:

The link to the website page is: https://cello-jaguar-jj9f.squarespace.com/ecological

and the Password is: C@r50N

Add to Design > Custom CSS

/* Align center list */
@media screen and (min-width:768px) {
[data-section-id="618c8b4e9f63b5390607dc68"] li {
    position: relative;
    left: 50%;
}}

Use this free tool to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

13 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Align center list */
@media screen and (min-width:768px) {
[data-section-id="618c8b4e9f63b5390607dc68"] li {
    position: relative;
    left: 50%;
}}

Use this free tool to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Thank you! That worked beautifully on that page!

Is it possible to adapt the code for this page please so that the second row is also aligned to the centre/middle: https://cello-jaguar-jj9f.squarespace.com/forest-carbon

When I tried using the previous code with the appropriate block id, it just shifted both rows more into the middle, but the second row still remained aligned to the left:

On 3/25/2022 at 3:19 AM, JJL said:

Thank you! That worked beautifully on that page!

Is it possible to adapt the code for this page please so that the second row is also aligned to the centre/middle: https://cello-jaguar-jj9f.squarespace.com/forest-carbon

When I tried using the previous code with the appropriate block id, it just shifted both rows more into the middle, but the second row still remained aligned to the left:

I see you removed last 2 items. Do you still need help?

17 hours ago, tuanphan said:

I see you removed last 2 items. Do you still need help?

 

Hi yes,

My apologies I ended up just removing those two items from that page, but I'm still encountering the same problem on our teams page with some of the sections (E.g. Environmental Services): https://cello-jaguar-jj9f.squarespace.com/our-team

On 3/27/2022 at 7:36 AM, JJL said:

Hi yes,

My apologies I ended up just removing those two items from that page, but I'm still encountering the same problem on our teams page with some of the sections (E.g. Environmental Services): https://cello-jaguar-jj9f.squarespace.com/our-team

 

Hi. You mean center items on 4 sections on Our Team page?

11 hours ago, tuanphan said:

Hi. You mean center items on 4 sections on Our Team page?

 

Hi,

I'd like to centre each section -- however, for some sections where they have a second row (e.g., Environmental Services), the previous code you provided shifts both rows into the centre, but the second row is still aligned to the left as shown in the image below:

Instead, I'd like the second row to be aligned to the middle like in the below image I photoshopped:

Thank you again for your help 🙂

On 3/30/2022 at 4:09 AM, JJL said:

Hi,

I'd like to centre each section -- however, for some sections where they have a second row (e.g., Environmental Services), the previous code you provided shifts both rows into the centre, but the second row is still aligned to the left as shown in the image below:

 

Instead, I'd like the second row to be aligned to the middle like in the below image I photoshopped:

 

Thank you again for your help 🙂

 

Add to Design > Custom CSS

/* Our Team center items */
@media screen and (min-width:992px) {
/* Environmental Services */
.user-items-list-item-container[data-section-id="618cabee4d28804787778fef"] li:nth-child(4) {
    grid-column: ~"2/3";
}
/* Forestry Services */
.user-items-list-item-container[data-section-id="618cb990402c55508b8a6248"] li:nth-child(n+10) {
    position: relative;
    left: 75%;
}
/* GIS Services */
.user-items-list-item-container[data-section-id="618cc8284d2880478778ba4e"] li:nth-child(n+4) {
    position: relative;
    left: 75%;
}
}

On 4/1/2022 at 1:38 AM, tuanphan said:

Add to Design > Custom CSS

/* Our Team center items */
@media screen and (min-width:992px) {
/* Environmental Services */
.user-items-list-item-container[data-section-id="618cabee4d28804787778fef"] li:nth-child(4) {
    grid-column: ~"2/3";
}
/* Forestry Services */
.user-items-list-item-container[data-section-id="618cb990402c55508b8a6248"] li:nth-child(n+10) {
    position: relative;
    left: 75%;
}
/* GIS Services */
.user-items-list-item-container[data-section-id="618cc8284d2880478778ba4e"] li:nth-child(n+4) {
    position: relative;
    left: 75%;
}
}

 

Thank you! This worked great!