Getting Full Bleed Header Image on Blog Pages

Site URL: https://www.outbrnd.com/

Hey Guys,

I had to put my site on hold for a while and now that I'm back, Squarespace seems to have changed quite a bit. I've now tried to create a blog on my site, which is going to host some articles for SEO purposes.

However, at the top of each post, I'd like to have a full-bleed image, or at the very least, I'd like it to almost reach the edge of the browser. The only thing I can think of is to create a custom CSS script that will change the image block's width on each blog post.

However, the problem with that is that I intend to have a lot of posts, so i'm going to end up with a LOT of custom CSS Scripts just for the image blocks.

Another thought I had, I can possibly 'diy' a blog system by creating multiple pages (one normal page for each post - using normal pages since they have the option for a header with a full-bleed image) under a folder, and having that folder's page show images which link to the individual posts. Although, that would be quite a bit of extra work just to have full-bleed header banners.

Is there another way that I can achieve this? Any help here would be appreciated.

On 6/24/2021 at 5:50 PM, AttractiveToast said:

Site URL: https://www.outbrnd.com/

Hey Guys,

I had to put my site on hold for a while and now that I'm back, Squarespace seems to have changed quite a bit. I've now tried to create a blog on my site, which is going to host some articles for SEO purposes.

However, at the top of each post, I'd like to have a full-bleed image, or at the very least, I'd like it to almost reach the edge of the browser. The only thing I can think of is to create a custom CSS script that will change the image block's width on each blog post.

However, the problem with that is that I intend to have a lot of posts, so i'm going to end up with a LOT of custom CSS Scripts just for the image blocks.

Another thought I had, I can possibly 'diy' a blog system by creating multiple pages (one normal page for each post - using normal pages since they have the option for a header with a full-bleed image) under a folder, and having that folder's page show images which link to the individual posts. Although, that would be quite a bit of extra work just to have full-bleed header banners.

Is there another way that I can achieve this? Any help here would be appreciated.

You can inject javascript to get the featured image as the full bleed image for all blog

@AttractiveToast Do you need help with these?

Site URL – https://www.outbrnd.com/

1. (Homepage) Adjust so that 5 icons are aligned?

2. (Mobile – Homepage) Align center text?

3. (Tablet – Homepage) Reduce text size?

4. (Tablet – Homepage) Adjust so that 5 icons are aligned?

5. (Tablet – hours) Increase text width?

6. (Tablet-Homepage) Increase text width?