Full width blog post image

Hello,

On this blog post I would like to make the top image full bleed on the width and run behind the navigation bar to the top of the view portal (but not full view portal height). I've seen Will Myer's banner image plugin but I'd like to know if there is a way I can do this with css or code block (instead of code injection)?

https://crimson-crow-6xs9.squarespace.com/walks/trollheimentriangle

password: sl

Many thanks

James

UPDATE
I've made the image full width by using this code: 

#block-yui_3_17_2_1_1710773334883_7834 {
  padding: 17px 0px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Is it possible to pull up all the blog content so the first image starts at the top of the view portal (behind the nav bar)?

And can I modify this code so it targets the 1st image on every blog post? 

Hi James, Please update with the following CSS. It will solve your issue. Let me know if you still have any issues.
 

#article- {
    padding-top: 0;
}
#article- .blog-item-wrapper .blog-item-top-wrapper {
    display: none;
}
#article- .blog-item-content-wrapper .blog-item-content .sqs-col-12 > .sqs-block-image:first-child {
      padding-top: 0 !important;
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
}

1 hour ago, Shadmon said:

Hi James, Please update with the following CSS. It will solve your issue. Let me know if you still have any issues.
 

#article- {
    padding-top: 0;
}
#article- .blog-item-wrapper .blog-item-top-wrapper {
    display: none;
}
#article- .blog-item-content-wrapper .blog-item-content .sqs-col-12 > .sqs-block-image:first-child {
      padding-top: 0 !important;
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
}

Hi @Shadmon, thanks for your response. 

I've replaced the css, the content is nearer to the top of page but still not quite there. Is there anything I try to move it up? 

I've also set the left and right padding on the image to 0 as it had a white margin when I placed the code.

Thanks again for your help.

1 hour ago, Shadmon said:

Hi, Thank you for letting me know. Please update this CSS line only :

#article- {
    padding-top: 0;
    margin-top: -80px;
}

Let me know if it works !

Hi Shadmon, yes that works! Thank you!

The only issue it created, which I should of seen coming, was in edit mode the blog title is now hidden behind the navigation bar so I can't change without manually removing the margin every time. I've made some adjustments to the design so I'm now happy with the result.

Thank you for all your help!

Sounds good! You are most welcome.

On 3/19/2024 at 9:35 PM, Shadmon said:

Sounds good! You are most welcome.

Hi Shadmon,

I was wondering if you might be able to help with something else on this. I only want this css at apply to blog posts in this blog (i've changed the url https://crimson-crow-6xs9.squarespace.com/walkdetails/trollheimentriangle) and not all blogs on the website. On inspection I think I need to include some reference to this:
data-page-sections="65ead4ee598b4a48b4cd66fb"
but I'm not sure how to include it in the code. Any help would be appreciated.

Many thanks

James
 

On 3/27/2024 at 4:38 AM, FattyGuinness said:

Hi Shadmon,

I was wondering if you might be able to help with something else on this. I only want this css at apply to blog posts in this blog (i've changed the url https://crimson-crow-6xs9.squarespace.com/walkdetails/trollheimentriangle) and not all blogs on the website. On inspection I think I need to include some reference to this:
data-page-sections="65ead4ee598b4a48b4cd66fb"
but I'm not sure how to include it in the code. Any help would be appreciated.

Many thanks

James
 

You can edit blog post > Add a Block > Choose code > Then paste same code, but wrap it with style tag

<style>
  CSS code, no need to add ID
</style>

Hi, I've been searching the forums for a solve and I think this thread approaches what I'm looking for, but not quite sure where to take it from here. 

Using a Brine template I have an index page with a banner image that is full bleed and sits behind the nav.

I have individual blog posts that I want to emulate this same look and feel, but the template doesn't support this. So I'm currently just uploading an image to the blog and placing text above it for now (attached). My plan is to create a unique asset for each individual blog post and ideally they would mimic the full bleed style and positioning of the index page. Is there a way to do this?

index page: https://www.regijacob.com/

blog post: https://www.regijacob.com/work/skylanders

test image url: