How to fix the Code block in SquareSpace when it is too tall

Hey Squarespace designers, this is a follow up to a

video about using the Custom Code Block in Squarespace.

Avideo watcher said,

“How do I adjust the height of this Custom Code Block?”

And that is a really great question. Alright,

so in my footer, you can see that my Custom Code Block has this

embedded scripts block and I can preview in Safe Mode or Exit safe preview.

And one of the problems is that I cannot make this smaller,

right? Because this box is here,

I can’t, this box is stuck to the same size.

I can make it wider, but I can’t change the height.

So that means that when I look at my

site, and I come down to the bottom,

it includes this extra space,

which, is intended in this design, but in your design,

you might not want it. And you can see if I come into inspect,

and I inspect this area,

you can see my block has a height of 276.

Alright, so here’s the fix. If we come in to exit,

I’m going to exit here, and if I’m using my website tools,

my custom CSS, there is a snippet

of code that you can do, which basically is saying,

in this block editor that we’re using,

we’re going to hide on the code block that preview edit

code. So I’m going to click, I’m going to scroll down so you can see it

here. And we’re going to edit.

Oh, we can’t see both at the same time, because I didn’t pop it

out. Okay, so I’m going to go ahead and say save.

Now I’m going to click Edit. And when I scroll down

to that block of code, and I come into edit site footer,

you can see that the preview and exit preview is

now gone. And this allows me to change the height of my code.

And because I’ve changed the height of my code block,

I can now come into my section and close the height as well,

which before I couldn’t do because the code block was so tall

that that’s all I could do. Umm,

that’s all that I could constrain it. So,

I will put this code in the comments

and also in a blog post so that you can reference it.

So I’m going to go ahead and say save. And that fixes the height of

my custom code. Now,

I did find, and this is changing it in the editor,

so then by using the anchors and changing sizes,

manually, I can adjust it.

I did find a code block where it could actually say,

in the front end, make your code blocks only one pixel

high. And that was suggested in the forums.

You might have a use case where that is helpful.

Especially if maybe it’s just JavaScript or something that doesn’t actually

need any space on your website.

But what I’m going to show you is in my case,

I am using the code block for,

icons as well.

And by using that code block on the front end,

it messes up my alignment. If I comment this back out,

it

moves it back down. Right?

So you might have some instances where this,

snippet would work for you,

but it’s not a tried and true fix.

It could mess up your alignments. Alright,

so if you found this helpful,

please go ahead and give it a thumbs up.

And if you’d like to see more videos about Squarespace and Design and

Web Development, then please subscribe.

Alright, thank you.