Need Help with Aligning Code Blocks with Images for a Continuous Scroll Experience

Hello everyone,

I'm working on a new web project and am trying to create a unique visual experience for visitors. The goal is to have a dynamic image and embedded video layout that seamlessly scrolls down the page, giving the impression of one giant, continuous image.

My Website: https://mindofalexander.squarespace.com/jlove-tv

The Problem:

I've successfully managed to align image blocks so that they sit flush against each other with zero padding, using CSS. However, I'm having issues when it comes to embedding code blocks. These blocks aren't aligning perfectly with the image blocks, causing a disjointed scrolling experience.

What I've Done So Far:

Here are the CSS rules I've applied to achieve image block alignment:

/* JLove Project Image Sizes */
#item-64dd2003f0a4be3998c1f3d1 {
    width: 1250px;
    margin: 0em auto 0 auto;
}

/* Adjust Block Top Margin */
#item-64dd2003f0a4be3998c1f3d1 .content-wrapper {
    margin-top: -55px !important;
}

/* Adjust Block Padding */
#item-64dd2003f0a4be3998c1f3d1 .sqs-block {
    padding: 0px !important;
}

/* Adjust Content Padding */
#item-64dd2003f0a4be3998c1f3d1 .content-wrapper {
    padding: 4em !important;
}
 

Despite these rules, the code blocks aren't aligning as expected. 

Here's a rundown:

1. Images: These are pressing up against each other with zero padding, just the way I want them to.
2. Code Blocks: These aren't aligning flush with the images. I've tried adding padding, but it doesn't solve the issue.

Questions:

1. Has anyone experienced similar issues with code blocks not aligning properly with image blocks?
2. Are there any CSS properties or JavaScript solutions that can help me make the code blocks flush with the images?

I'd be grateful for any advice or fixes to get the code blocks to line up flush with the rest of the content.

Thank you for your time and expertise!

Thanks,

Alexander

Bump

Screenshot looks fine. Or you mean remove white space between blocks in screenshot?

7 minutes ago, tuanphan said:

Screenshot looks fine. Or you mean remove white space between blocks in screenshot?

Numerous code blocks are interwoven with image blocks. While the image blocks seamlessly abut one another with no padding, the code blocks do not exhibit the same alignment. My objective is to ensure that the code blocks align seamlessly with all other elements, erasing any gaps completely.

@tuanphan

Bump

<video> tag is an inline-block tag so it has that padding. You can use this code to Custom CSS to remove these padding

video {
    display: block !important;
}

4 minutes ago, tuanphan said:

<video> tag is an inline-block tag so it has that padding. You can use this code to Custom CSS to remove these padding

video {
    display: block !important;
}

 

@tuanphan

Thank you for the update; it's great to see that the dilemma between the code blocks and image blocks has been resolved.

However, I've noticed that there's still an issue when a code block is adjacent to another code block—there's some extra spacing there that doesn't seem intended. Could you please take a look at this?

 

31 minutes ago, mindofalexander said:

@tuanphan

Thank you for the update; it's great to see that the dilemma between the code blocks and image blocks has been resolved.

However, I've noticed that there's still an issue when a code block is adjacent to another code block—there's some extra spacing there that doesn't seem intended. Could you please take a look at this?

 

Which spacing?

Bump

I don't see this problem on my end, so you try this Custom CSS

video {
    display: block !important;
	margin-bottom: -1px;
}