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

Reduce height of code block


Claire_auck

Question

4 answers to this question

Recommended Posts

  • 0

Sorry Claire. I added a space between the block ID and the rest. It shouldn't be there. That's the problem with posting at 11pm at night. It should have been:

#block-yui_3_17_2_1_1627505219076_5381.sqs-block-code img {
  margin-top: -100px;
}

In answer to your questions, I used the Block ID of your Code Block on the specific page. If someone wants to use this solution, they'll need to use the ID that refers to their Code Block, as each one is unique.

If you were embedded the SVG code in the code block, you'd use the reference 'svg', but as you've uploaded your SVG as a .svg file, it's correct to use the 'img' reference.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

Hi Claire

Is it the height of the image that you want to change?

The dimensions are being set by the SVG file and because images will appear at 100% width on the Squarespace page, the SVG will retain the aspect ratio making the height around 210px. 

You can make this appear less by placing the SVG higher up the page by adding some negative margin in Custom CSS:

#block-yui_3_17_2_1_1627505219076_5381 .sqs-block-code img {
  margin-top: -100px;
}

866639557_Screenshot2021-07-28at22_31_09.thumb.png.c2f3c61daa0d170d45701a144bc59344.png

If you want to reduce both height and width, you can add a Spacer Block beside the Code Block instead of using CSS.

Paul

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

Hi Paul, so nice to hear from you and thanks for answering my question.

The width/height of the svg image is good. It's the gap between the last line of yellow text and the animation that's the issue. It seems to add a large container which I think it normal for SS?  Or could the svg be saved in a different way? 

It sounds like your code solutions will work well. Just a dumb question here, do i need to update the 'img' with the svg file name or is the #block id enough? I tried the code as it is but it doesn't change anything but It looks like you've managed it in your screenshot.

Cheers
Claire
 

Screen Shot 2021-07-29 at 9.56.13 AM.png

Link to comment
  • 0
On 7/29/2021 at 9:39 PM, paul2009 said:

Sorry Claire. I added a space between the block ID and the rest. It shouldn't be there. That's the problem with posting at 11pm at night. It should have been:

#block-yui_3_17_2_1_1627505219076_5381.sqs-block-code img {
  margin-top: -100px;
}

In answer to your questions, I used the Block ID of your Code Block on the specific page. If someone wants to use this solution, they'll need to use the ID that refers to their Code Block, as each one is unique.

If you were embedded the SVG code in the code block, you'd use the reference 'svg', but as you've uploaded your SVG as a .svg file, it's correct to use the 'img' reference.

Sorry for the slow reply Paul, I'm just back onto this project now. 
This worked perfectly, thank you so much for you help as always!
Yes working after 11pm has it's disadvantages.

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