Jump to content

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

Go to solution Solved by mindofalexander,

Recommended Posts

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

screencapture-mindofalexander-squarespace-my-work-jlove-tv-2023-09-02-08_04_30.png

Edited by mindofalexander
Link to comment
  • Replies 10
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to comment
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?

 

screencapture-mindofalexander-squarespace-my-work-jlove-tv-2023-09-07-05_19_16.png

Link to comment
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?

 

screencapture-mindofalexander-squarespace-my-work-jlove-tv-2023-09-07-05_19_16.png

Which spacing?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.