CSS: Struggling to Align Image and Code Blocks Seamlessly

👋 Hey Squarespace Community,

I'm working on a rather unique design project for my site, and I've hit a bit of a roadblock. I'd love some input on how to tackle this issue effectively.

The Goal

My goal is to place multiple image blocks and code blocks on my page so that they perfectly align with each other, giving the illusion of a single, continuous image as you scroll down the screen. The challenge is that I want each block to be exactly the size I designed it to be in Photoshop—no auto-fitting or stretching.

The Issue

Squarespace's default settings seem to add padding or margins that prevent the blocks from fitting perfectly flush against each other. I've been tweaking with custom CSS to solve this, but I haven't had any success yet.

The page's Item ID is `#item-64dd2003f0a4be3998c1f3d1`, and I've got specific Collection IDs for each block (`#block-yui_3_17_2_1_1692977885179_20119`, `#block-yui_3_17_2_1_1692977885179_20392`, `#block-yui_3_17_2_1_1692977885179_21674`, etc.). All images are designed to be 1920 pixels in width.

Example for Reference

For a practical example, you can check out my old website, which achieved this effect perfectly: https://www.mindofalexander.com/jlovetv  (password = moa).

My Code So Far

I've been experimenting with custom CSS like this but unfortunately this didn't fix the problem:

/* Remove margins and padding */
#block-yui_3_17_2_1_1692977885179_20119,
#block-yui_3_17_2_1_1692977885179_20392,
#block-yui_3_17_2_1_1692977885179_21674 {
  margin: 0 !important;
  padding: 0 !important;
  width: 1920px;
}

Troubleshooting Done

I've tried various CSS hacks and inspected elements using developer tools, but I'm not able to get the exact design I'm aiming for. The blocks either end up overlapping, or they don't sit flush against each other.

Request for Help

Would anyone be able to take a look and offer some guidance? I've got more blocks to add, but I want to solve this issue first before proceeding. 

My current website URL: https://mindofalexander.squarespace.com

Thanks in advance for any help you can offer! 🙏

The site is pretty messed up right now as I check on it, the images are floating right outside the viewing port:
https://mindofalexander.squarespace.com/my-work/jlove-tv

You might try using a NON FLUID section to solve this gapping issue as Fluid will do that sometimes with code blocks and other Squarespace Blocks.

Let me know if you get the site back to normal settings and I'll give it a quick go...

5 minutes ago, DPruitt said:

The site is pretty messed up right now as I check on it, the images are floating right outside the viewing port:
https://mindofalexander.squarespace.com/my-work/jlove-tv

You might try using a NON FLUID section to solve this gapping issue as Fluid will do that sometimes with code blocks and other Squarespace Blocks.

Let me know if you get the site back to normal settings and I'll give it a quick go...

Should be fixed! 🙂

Yep, try putting all this inside of a "classic editor" section instead... You'll have to code the block paddings of course, but it won't/shouldn't do the crazy flex gapping; if it does, we should be able to code are way through it...

Just now, DPruitt said:

Yep, try putting all this inside of a "classic editor" section instead... You'll have to code the block paddings of course, but it won't/shouldn't do the crazy flex gapping; if it does, we should be able to code are way through it...

I didn't know 'classic editor' was even such a thing. How do I access that?

When you go to add a section, scroll to the bottom and you'll see "add blank classic section" and below that a fine point small text where you can access all the classic page layouts, including Lists...

4 minutes ago, DPruitt said:

When you go to add a section, scroll to the bottom and you'll see "add blank classic section" and below that a fine point small text where you can access all the classic page layouts, including Lists...

You my friend are amazing!

If it works feel free to mark as solution, good luck!

8 minutes ago, DPruitt said:

If it works feel free to mark as solution, good luck!

You wouldn't be able to tell me the padding for the old site would you? 

https://www.mindofalexander.com/jlovetv  (password = moa).

All the blocks are paddings of 0?

If you're referring to the page:

#mainContent {
    padding: 4em;
    width: 1250px;
    background-color: #fff;
}

3 minutes ago, DPruitt said:

All the blocks are paddings of 0?

If you're referring to the page:

#mainContent {
    padding: 4em;
    width: 1250px;
    background-color: #fff;
}

 

If I mimic that to my new site the image block gets sent left.

#item-64dd2003f0a4be3998c1f3d1 {
    padding: 4em;
    width: 1250px;
}

I'm just trying to replicate the same size images as the other site. Any fixes you can recommend or share?

Since you're using SS 7.1, don't use css to adjust your width, go into your sites settings to adjust your sites max width to 1250px and set site margin to 4vw.

Just now, DPruitt said:

Since you're using SS 7.1, don't use css to adjust your width, go into your sites settings to adjust your sites max width to 1250px and set site margin to 4vw.

I'm not trying to make my entire site set at a max width of 1250px since I want the content to adjust with screen sizes such as 4K resolution.

I'm fairly new to code as a whole so any solution that allows me to post my work flush against each other while having the ability to look good on any screen size is what I'm seeking.

I want to share a screenshot of the old sites editor.

The padding is already integrated in.

2 minutes ago, DPruitt said:

Oh okay, that's not how the old site is operating...  See how it's constrained?  It has a max width of only 1250px regardless of the screensize, it will never go beyond 1250px.

Here, just add the margin "auto" to fix the alignment...

#item-64dd2003f0a4be3998c1f3d1 {
    padding: 4em;
    width: 1250px;
    margin: auto;
}

 

This was the fix I was looking for! Thank you my friend! Definitely learning.

14 minutes ago, DPruitt said:

Oh okay, that's not how the old site is operating...  See how it's constrained?  It has a max width of only 1250px regardless of the screensize, it will never go beyond 1250px.

Here, just add the margin "auto" to fix the alignment...

#item-64dd2003f0a4be3998c1f3d1 {
    padding: 4em;
    width: 1250px;
    margin: auto;
}

 

Please refer to DM 

Thanks!