Center Aligning Elements when Columns/# of Items are not completely filled

Hi,

I need some help with CSS coding as a SquareSpace representative told me this is not doable through usual formatting means.

I have a blog website and need some help with center alignment for different pages. All are the similar concept I believe; however, I am new to CSS coding.

• Summary Block: I have a Summary Block with Number of Items = 3. The summary shows posts from my blog page. However, when only 1-2 posts are up, the 1-2 posts align to the left automatically. I'd like the 1-2 posts to be center-aligned in the page even though the total number of items (3) is not filled.
  • Here is a CSS code I found on Google that works; however, if there is a better approach, I'd love to see it.
  • .sqs-block-summary-v2 .summary-item-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
• Blog Page: Similar to the Summary Block, my blog page is a Basic Grid Blog where Columns = 3. If I only have 1-2 blog posts, the 1-2 posts align to the left automatically. I'd like the 1-2 posts to be center-aligned in the page even though the number of columns is not filled.
  • I haven't found CSS code that works for this.
• Blog Page (Older Posts subpage): Similar to the Blog Page, if I only have 1-2 blog posts in the Older Posts page, the 1-2 posts align to the left automatically. I'd like the 1-2 posts to be center-aligned in the page even though the number of columns is not filled.
  • I haven't found CSS code that works for this.

Timely assistance would be greatly appreciated!

For the Blog Page, this code is close, but the formatting for the second blog post is abnormal.

.blog-basic-grid.collection-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
      align-content: center;
}

Hi. Can you share link to your site? We can help easier

2 hours ago, tuanphan said:

Hi. Can you share link to your site? We can help easier

Sure, thank you.

It is: thisiswhy.life

Password: this

• For the Summary Block, I am referring to the homepage.
• For the Blog Page, I am referring to the Our Stories page.

On 5/28/2021 at 10:26 PM, bjung8 said:

• For the Summary Block, I am referring to the homepage.
• For the Blog Page, I am referring to the Our Stories page.

Hi.

It looks like you removed block on homepage?

Can you share link to our story page? I clicked link on footer and this..

Apologies; I was trying to hide some pages when sharing a link to others. I've re-enabled the two pages as password-protected.

The password for all pages: this

For the Our Stories page, the way I have the CSS set up now is how I'd like it (where there are 3 columns, if all three are not filled like the two posts are, they will auto-center to fill the space).

However, I do not want the pictures to get re-sized so small.

8 hours ago, bjung8 said:

For the Our Stories page, the way I have the CSS set up now is how I'd like it (where there are 3 columns, if all three are not filled like the two posts are, they will auto-center to fill the space).

However, I do not want the pictures to get re-sized so small.

This is the CSS:

.blog-basic-grid.collection-content-wrapper
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
      align-content: center;
      max-width:100%;
}

I see 2 items here. Can you add 3?

4 hours ago, tuanphan said:

I see 2 items here. Can you add 3?

I can. So there are 3 columns in the basic grid. But if I don’t fill all 3 columns like I have here (2 filled), I want the 2 to be automatically center-aligned as opposed to just aligning to the left by default. 

On 6/1/2021 at 7:22 PM, bjung8 said:

This is the CSS:

 

.blog-basic-grid.collection-content-wrapper
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
      align-content: center;
      max-width:100%;
}

I've disabled this CSS and if you visit the 'Our Stories' page, you can see what I mean. I have 3 columns in the Basic Grid block. If I only fill 1-2, they automatically align to the left as you can see. I'd like it to where if I only fill 1-2 columns, they are center-aligned on the page.

This is also for the subpage of 'Older Posts' when that pops up after all 3 columns are filled. For example, if I have 5 total posts, this means the three columns in the 'Our Stories' page are filled. This means that in the 'Older Posts' subpage, there are 2 posts, but these are also automatically aligned to the left.

18 hours ago, bjung8 said:

I've disabled this CSS and if you visit the 'Our Stories' page, you can see what I mean. I have 3 columns in the Basic Grid block. If I only fill 1-2, they automatically align to the left as you can see. I'd like it to where if I only fill 1-2 columns, they are center-aligned on the page.

This is also for the subpage of 'Older Posts' when that pops up after all 3 columns are filled. For example, if I have 5 total posts, this means the three columns in the 'Our Stories' page are filled. This means that in the 'Older Posts' subpage, there are 2 posts, but these are also automatically aligned to the left.

Add to Our Stories Page Header

<style>
  @media screen and (min-width:768px) {
  .tweak-blog-basic-grid-width-full .blog-basic-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
article.blog-basic-grid--container.entry.blog-item.is-loaded {
    width: 33.3333%;
}
  }
</style>

6 hours ago, tuanphan said:

Add to Our Stories Page Header

<style>
  @media screen and (min-width:768px) {
  .tweak-blog-basic-grid-width-full .blog-basic-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
article.blog-basic-grid--container.entry.blog-item.is-loaded {
    width: 33.3333%;
}
  }
</style>

I've created 5 blog posts now. So 3 should be showing in the immediate 'Our Stories' page, and 2 should be in the Older Posts subpage. I've added your code; however, this is what I see (image attached).

I also would like the 'Older Posts and arrow' to be below the blog posts, not to the right.

And this is the 'Older Posts' subpage.