Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Question

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!

Edited by aurevoirblue
clarification
Link to comment

12 answers to this question

Recommended Posts

  • 0

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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!

Link to comment
  • 0

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

8907015_ScreenShot2021-06-14at11_21_25AM.thumb.png.0cd519145265569d58075c2866847a20.png

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.

492738704_ScreenShot2021-06-14at11_22_56AM.thumb.png.e8c1e9306cdf9269905827d4620d3f22.png

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

@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.

Edited by Kwamzilla

Specialising in Squarespace CSS and customisation.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me by buying me a coffee.

Link to comment
  • 0

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

1011575799_ScreenShot2021-06-16at5_25_22PM.png.9fe31d1be82b11e3a75448cda7018fc9.png

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.
 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
13 hours ago, aurevoirblue said:

Thanks @creedon

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

Please share the site link.

Specialising in Squarespace CSS and customisation.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me by buying 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...