Jump to content

Align Filtered Blog Content To Top of Section

Recommended Posts

Many thanks ahead of time for any assistance on this...
On my blog page (Basic Grid), I have created side by side sections using...
 

// NEWS SECTION WIDTH TABLET + DESKTOP
@media screen and (min-width:640px) {
  main#page section[data-section-id="628e6377303b81491fc0bd48"] {
    max-width: 70%;
}
// ARCHIVE SECTION WIDTH TAB + DESK
      main#page section[data-section-id="65e489a165c69874483d6fef"] {
    max-width: 30%;
  }
}

In the left section I have a blog archive sorted by category.  All is fine on the general /news page, but when a category link is selected to filter by category, the blog section then creates a large white space (see screenshot attachment). I have tried using the CSS position attribute in different variations, but nothing I have tried is exclusive to the category filtered content, as it effects the entire blog page at any state. How can I make all of my sections on the page remain top-aligned as category archive filters are selected?

Again, much appreciation for any attention to this.

Screenshot 2024-03-05 at 10.35.06 AM.png

Link to comment
  • Replies 11
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Can you share your website URL and this page?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

On the section settings, can you try changing the vertical alignment from center to top?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
23 hours ago, Ziggy said:

On the section settings, can you try changing the vertical alignment from center to top?

@Ziggy  I am able to see that setting in the left section with the archive links (see attached), but this does not show for the blog roll.
With this in mind, how can we achieve this setting for this section using CSS? I feel that would be the solution.

Thank you all
 

Screenshot 2024-03-12 at 10.17.39 AM.png

Link to comment

I'm not sure exactly how you have this set up, but correcting this can be done in the section settings. I guess this might be hard to find because of the setup?

image.thumb.png.c5eb03143f72a0c20281f100d68ee8c4.png

You can try this if you can't access the settings:

section[data-section-id="628e6377303b81491fc0bd48"] {
  .page-section {
    align-items: flex-start;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
4 hours ago, Ziggy said:

I'm not sure exactly how you have this set up, but correcting this can be done in the section settings. I guess this might be hard to find because of the setup?

image.thumb.png.c5eb03143f72a0c20281f100d68ee8c4.png

You can try this if you can't access the settings:

section[data-section-id="628e6377303b81491fc0bd48"] {
  .page-section {
    align-items: flex-start;
  }
}

@Ziggy it is set up just how squarespace has it by default, except for the width of the sections. I never changed it. The blog settings options are not the same as any other normal page section. Are the blog vertical-alignment settings located somewhere other than under the section's settings? Am I missing something?

Thank you for this tried attempt,,,


section[data-section-id="628e6377303b81491fc0bd48"] {
  .page-section {
    align-items: flex-start;
  }
}

...but it's still showing that large blank space when blog content is filtered via archive links.

Link to comment

How interesting, this really looked like a custom setup! At this point I'd be happy to help further, but the only way I can effectively do that would be with admin access to your website.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
32 minutes ago, thedowntowncreative said:

I'm fine with that if you really don't mind clicking around! How can we arrange this @Ziggy

I'll DM you with my email for Admin permissions

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.