How to place 2 images on opposite sides of the page? (visual example below)

Site URL: https://heron-bassoon-x9re.squarespace.com/

Here's the visual example to help explain what I mean. Please note the top banner of this template:

https://chloe71.squaremuse.com/?password=demo

I'd like to place images on either side of the page (or banner?) that bleed off the edges. Is there a custom css code I can inject to do this?

Thanks in advance!

Each page section is divided into 12 columns. On the page you cite the are 2 cols, 8 cols, 2 cols for the effect you are interested in. The 2 cols contain image blocks.

The basic effect can be built with standard SS interface tools.

Once you get the basic effect started, hit us up if you need some CSS to finish it off. It would help if you post a URL to a page we can see.

Thanks for the reply @creedon

How do I build the basic effect? Just place the images on the pages?!

I'm not married to this template either, so if there's another template I should use to get this layout effect, please let me know.

I've updated the page permission. Password: heron

Thanks!

Here is the basic effect. I set the content width of the page section to custom 100.

You can of course put any block(s) you want in the middle area.

Then I threw on some CSS to get the section to be full-bleed.

Once you get the basic effect started and are happy with the direction it is going hit us up for the CSS.

v7.1 has only one template. What SS calls templates for v7.1 are a starting point of colors and fonts.

Please see Adding content with blocks - Add blocks to a page and Resizing blocks.

Let us know how it goes.

@creedon is correct.

Once you've completed that, you can add css that will essentially be

#yoursectionid .content-wrapper {
padding-left: 0;
padding-right: 0;
}

You'll also want to think about the mobile layout though as it will automatically place the blocks in order from left to right. You may then wish to use

/*Shrink Images*/
#yoursectionid .sqs-block-image {
max-width: 40%;
}
/*Align Image Left*/
#blockid1 {
margin-right: auto;
}
/*Align Image Right*/
#blockid2 {
margin-left: auto;
}

Where #blockid1 is the left image and #blockid2 is the right image.

Walkthrough video.

Thanks so much @creedon and @Kwamzilla!!

I'll give it a go right now. Your attention on this is very much appreciated! 

No drama. Please don't forget to mark your question as answered if one of us has solved it for you.

Thanks  @creedon and @Kwamzilla

I seem to be missing a step. How do I "set the content width of the page section to custom 100"?

Thanks @creedon

Ok, added that. Still doesn't seem to be working...

Even though you're not using a background image on that section, set the background image to full bleed.

Add the following to Design > Custom CSS.

[data-section-id="60c3a049a9e0ef1b010386eb"]:not( .full-bleed-section ) > .content-wrapper {

  padding-left : 0;
  padding-right : 0;
  
  }

Let us know how it goes.
 

13 hours ago, aurevoirblue said:

Thanks @creedon

Ok, added that. Still doesn't seem to be working...

Please share the site link.

Thanks @creedon Setting the background to full bleed w/CSS worked! 

Many, many thanks for all your help on this @creedon @Kwamzilla 🙏