Jump to content

Reduce height of code block

Go to solution Solved by paul2009,

Recommended Posts

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

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

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
  • Solution

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.

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
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
  • 3 months later...
On 11/29/2021 at 1:20 PM, IwanJ said:

Hi @tuanphan, sure, thank you, https://deep-learning-cafe.squarespace.com/ if you look at the Trusted By Teams At section, I'd like to increase the padding a little bit between the title and the top of the section, but reduce the spacing between the logos and the title just a bit so that everything is evenly spaced...

The site is private. You should setup password & share url again/ We can check easier.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
1 minute ago, IwanJ said:

Hi @tuanphan, sure, thank you, https://deep-learning-cafe.squarespace.com/ if you look at the Trusted By Teams At section, I'd like to increase the padding a little bit between the title and the top of the section, but reduce the spacing between the logos and the title just a bit so that everything is evenly spaced...

Can you please help?

I have sent the password via direct message

Why you don't add Gallery Block to add logos. Then you can add Text Block above it, instead of using 2 Sections to add text/images

Add to Design > custom CSS

/* Trusted by Team */
[data-section-id="61a0791fdfd0aa6784b37b75"] .gallery-grid.gallery-grid--layout-grid {
    padding-top: 0px;
}
div#block-abbc045be3aca25ed45b {
    padding-top: 37px;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

I'm also wanting to reduce the size (height primarily) of the code block.  Here's a link to one of the pages I am working on. 

https://www.nashconsulting.com/workshops

If someone can help me with the code and if I can add it Custom CSS so it works throughout the site? (I was able to do that with the spacer block height, I think). 

Thanks for your help!

Edited by KipB
Link to comment
23 hours ago, KipB said:

I'm also wanting to reduce the size (height primarily) of the code block.  Here's a link to one of the pages I am working on. 

https://www.nashconsulting.com/workshops

If someone can help me with the code and if I can add it Custom CSS so it works throughout the site? (I was able to do that with the spacer block height, I think). 

Thanks for your help!

Try adding to Design > Custom CSS

div.code-block {
    padding: 0px !important;
    height: 1px !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

Thank you @taunphan! Sorry it took me so long to get back into this and see your reply. The code you provided worked perfectly! Curious - could I change the height to 0px? Not that I really want to - but just wondered if that would be possible. 

Link to comment
On 2/24/2023 at 11:43 PM, KipB said:

Thank you @taunphan! Sorry it took me so long to get back into this and see your reply. The code you provided worked perfectly! Curious - could I change the height to 0px? Not that I really want to - but just wondered if that would be possible. 

Yes. Just change 1px to 0px

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...
On 12/4/2023 at 10:52 AM, scs18 said:

Hi @tuanphan,

 

I have been having the same issue across our website and have tried adding the custom css with no luck. Wondering if there is another solution? Website is https://www.theselfcaresisterhood.com/ and I'm specifically trying to change the spacing in the footer underneath our newsletter subscribe form

Thank you!

Use this CSS code

 You can use this CSS code to Website Tools (under Not Linked) > Custom CSS

/* Footer newsletter spacing */
.fe-641fc9caeeb8e8453ac7f320 {
    grid-template-rows: repeat(10,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}

image.thumb.png.61a2d8d640d7ac6eca03379d32035adb.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 12/5/2023 at 7:52 AM, tuanphan said:

 You can use this CSS code to Website Tools (under Not Linked) > Custom CSS

/* Footer newsletter spacing */
.fe-641fc9caeeb8e8453ac7f320 {
    grid-template-rows: repeat(10,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}

Hi @tuanphan, this works! A question, do you know if it's possible to detect it programmatically and adjust the number? e.g. repeat(10,..) in the above example, I can see what what number would fit best, but if there a way of calculating which number would fit the content?

I have this issue on quite a few pages, trying to see if I manually do it in Custom CSS or if there is another way.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody
💁‍♀️ SquareSpace Developer
You dream it, I'll make it happen.

Contact me:
💻 https://www.melodylee.tech

✉️ my email
📍 UK based. The great thing about the internet, we can work together from anywhere.

#neverstoplearning
I like coffee 😊
 

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.