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

Overlap images and sections with 7.1


gregbarbosa
Go to solution Solved by tuanphan,

Question

  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

/* remove section bottom padding */ [data-section-id="5ddd4eb4522cc3312c5226a6"] .content-wrapper { padding-bottom: 0 !important; } /* remove overflow hidden */ div#block-yui_3_17_2_1_158464711814

Can you share your site url & simple mockup? We can check easier.

Posted Images

10 answers to this question

Recommended Posts

  • 1
/* remove section bottom padding */
[data-section-id="5ddd4eb4522cc3312c5226a6"] .content-wrapper {
    padding-bottom: 0 !important;
}
/* remove overflow hidden */
div#block-yui_3_17_2_1_1584647118148_10720 .image-block-wrapper {
    overflow: visible !important;
}
/* overlap image */
div#block-yui_3_17_2_1_1584647118148_10720 img {
    width: auto !important;
    bottom: -20% !important;
    top: unset !important;
    right: 0;
    z-index: 999;
}

 

Link to post
  • 1

Hi @gregbarbosa,

If you are still looking for a solution for this.  SquareKicker recently release a new Squarespace Extension which is a no-code tool that gives you the ability to customise your site without having to write a single line of code (including the control to overlap images) using a visual builder.

VIDEO: Squarespace Layout: Overlapping Blocks Between Two Sections
https://squarekicker.com/letsmakethis/squarespace-layout-overlapping-blocks-between-two-sections 

Overlapping Blocks Between Two Sections.png

SquareKickerHi, I'm Nick Ippolito, founder at squarekicker.com.  SquareKicker is a No-Code Design & Animation Extension for Squarespace.  With SquareKicker say goodbye to copy & paste Squarespace plugins. Customize your Squarespace website with this full control design and animation extension. 

Link to post
  • 0

Okay I must be going crazy now. That code no longer works. It's now stuck behind again. Is there a change I broke or something else I have to do?

Here's the code I'm using (I re-added the image so the block-yui changed):

/* remove section bottom padding */
[data-section-id="5ddd4eb4522cc3312c5226a6"] .content-wrapper {
    padding-bottom: 0 !important;
}
/* remove overflow hidden */
div#block-yui_3_17_2_1_1587085802684_25650 .image-block-wrapper {
    overflow: visible !important;
}
/* overlap image */
div#block-yui_3_17_2_1_1587085802684_25650 img {
    width: auto !important;
    bottom: -20% !important;
    top: unset !important;
    right: 0;
    z-index: 999;
}

 

Link to post
  • 0

I used the following to get an overlap feature for an image card block in one section to bleed over the edge into the section below it.  You just need to change the #block-yui IDs in each.  Mine was acting a little funny on smaller widths so I added the screen width settings too.  I had this particular section at the "custom" height of 10 (the smallest it'll go), so you may have to tweak the top: 10vh number in the first set of CSS if you have a taller section.

@media only screen and (min-width: 800px){div#block-yui_3_17_2_1_1593439438559_11782 {
    width: auto !important;
    bottom: -20% !important;
    top: 10vh !important;
    right: 0;
    z-index: 999;
  }}

@media only screen and (max-width: 799px){div#block-yui_3_17_2_1_1593439438559_11782 {
    width: auto !important;
    z-index: 999;
padding-top: 20px !important;
  }
.sqs-block-image .design-layout-poster .image-card {
    width: 87%;
  padding-top: 30px !important;
}
}

 

Screen Shot 2020-06-29 at 1.25.33 PM.png

Edited by 44degreesnorth
attached image
Link to post
  • 0
On 10/1/2020 at 2:44 AM, olivianearle said:

Can anyone provide an update for this because neither code works. 😞

Can you share your site url & simple mockup? We can check easier.

Link to post
  • 0

Hello,

I am having difficulty with this, too. I am looking to use a singular image that spans the height (and width) of my entire home page instead of having the image be cut off at the end of the section that it is in.

https://www.takebackyourcareerpodcast.com/

password: boots135

Example: https://www.thefridayhabit.com/ (see background image is spanning all sections, so it appears).

Thank you

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...