Jump to content

blog landing page vs blog entries

Go to solution Solved by creedon,

Recommended Posts

Individual posts on my blog are formatted using the generic page settings (not custom coded in CSS):  content width MEDIUM, text alignment LEFT.

The page is https://jjdaley.photos/blog

On the main blog page the content has a different layout and looks nothing like the individual post pages. Nothing I can find in settings on the blog page or after extensive searching of forums has been helpful. 

This seems like a basic out-of-the-box requirement for a blogging system. I must be missing something. Any assistance would be welcome. Screenshot2024-05-11at12_51_57PM.thumb.png.d36a9ed849bee2cab07bdd8e9a8a4b63.pngScreenshot2024-05-11at12_52_09PM.thumb.png.e30359c1c19c885783058d06bc9ab1b0.png

Link to comment
  • Replies 7
  • Views 216
  • Created
  • Last Reply

Top Posters In This Topic

It did not.

I put the content in the center to simulate consistency (they still behave differently from each other when resizing the window) but I'm still frustrated that I can't utilize the full inside container to move content in blog entry and blog list to the left to line up with the logo. 

Is it possible to use css to have both the blog list and blog entries have the same alignment and width?

I am using single column for the blog list and show full post. 

 

thanks 

Link to comment

I did look at that solution. It moves the content to the left (see attachment) but it does not line the content up with the logo in the header and the behavior of the blog list and the posts are still inconsistent. 

I'm starting to get that this might be beyond the capabilities of the platform. Still, it seems like not a hugely weird requirement that these things line up. 

I do appreciate your help and patience. 

image.png

Link to comment

Also, I added this CSS in an attempt to line up the posts and list. It seems to work with the posts but not the list. 

 

/* Blog post width */
@media screen and (min-width:641px) {
.Main--blog-item .Main-content {
    width: 95% !important;
    margin-left: auto;
    margin-right: auto;
  min-width:585px;
}


}

/* Blog list width */
@media screen and (min-width:768px) {
.blog-single-column--wrapper {
    width: 95% !important;
    margin-left: auto;
    margin-right: auto;
  min-width:585px;
  }
}

 

Link to comment
  • Solution
Quote

I'm starting to get that this might be beyond the capabilities of the platform. Still, it seems like not a hugely weird requirement that these things line up.

I'm not giving up yet!

Put the width back to Inset.

Remove any previous attempts at this effect, make a copy somewhere.

Use the following CSS.

.tweak-blog-single-column-width-inset .blog-single-column {
  
  padding-left : 0;
  padding-right : 0;
  
  }

Here is what I see when I locally make these changes to your site.

Screenshot2024-05-13at2_07_01PM.thumb.png.972418473286d3f822a04b8ecbd2e93a.png

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.