Jump to content

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

Recommended Posts

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!

Link to comment
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

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

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

image.thumb.png.d0496d4145c6e8db6dca0353397c62c0.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

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.

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

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

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

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

image.thumb.png.ca2837f5e6304e9aaad730008875b36a.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
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>

image.thumb.png.ca2837f5e6304e9aaad730008875b36a.png

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.

Screen Shot 2021-06-05 at 7.35.22 AM.png

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.