bjung8

And this is the 'Older Posts' subpage.

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.

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.

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. 

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%;
}

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.

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 Summary Block, I am referring to the homepage.
• For the Blog Page, I am referring to the Our Stories page.

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 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,

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!