how to circumvent the default minimum height for a section?

Site URL: https://chimes-orb-6c7c.squarespace.com/config/

Hi,

I'm evaluating Squarespace for my personal website hence I'm new here.  I ran into an issue where the default minimum height for a section (the value '10') results in a look that's too sparse for my purpose.  I've contacted the support people and I was told that there is a way to inject custom CSS code to change that.  But they don't support it and this forum is the best resource to get advice on that.  

I am not familiar with CSS coding.  Could someone in the know please share a sample code that achieve that.  Also, any other warnings/advices in terms of how to get the code segment injected would be appreciated!

Thanks in advance.

michael

1 hour ago, mjz said:

Site URL: https://chimes-orb-6c7c.squarespace.com/config/

Hi,

I'm evaluating Squarespace for my personal website hence I'm new here.  I ran into an issue where the default minimum height for a section (the value '10') results in a look that's too sparse for my purpose.  I've contacted the support people and I was told that there is a way to inject custom CSS code to change that.  But they don't support it and this forum is the best resource to get advice on that.  

I am not familiar with CSS coding.  Could someone in the know please share a sample code that achieve that.  Also, any other warnings/advices in terms of how to get the code segment injected would be appreciated!

Thanks in advance.

michael

I 've accessed your url's site and it is private site. Could you check it again?

4 hours ago, HoaLT said:

I 've accessed your url's site and it is private site. Could you check it again?

Hi HoaLT,

Thanks for your response.  I am evaluating Squarespace and have not paid for it yet.  Could that be why it is a private site?  I've given the URL to the support people and they have had no issue accessing.  Is there a way for me to make it not private?

michael

Please set up a site-wide password.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Thanks for the pointers to the password protection etc.  Since then I've upgraded to a paid service (business plan); set up a site-wide password protection.  The password is currently: 1234.

Hope this allows folks in the know to help me with the default section-height issue.  

Thanks!

On 9/24/2021 at 2:18 AM, mjz said:

Thanks for the pointers to the password protection etc.  Since then I've upgraded to a paid service (business plan); set up a site-wide password protection.  The password is currently: 1234.

Hope this allows folks in the know to help me with the default section-height issue.  

Thanks!

 

Remove minimum height for all or specific section?

8 minutes ago, tuanphan said:

Remove minimum height for all or specific section?

Yes!

4 hours ago, tuanphan said:

Remove minimum height for all or specific section?

Sorry, I meant to say yes to all sections.

On 9/25/2021 at 11:47 AM, mjz said:

Sorry, I meant to say yes to all sections.

Try adding this to Design > Custom CSS

article section {
	min-height: unset !important;
}

18 hours ago, tuanphan said:

Try adding this to Design > Custom CSS

article section {
	min-height: unset !important;
}

 

Thanks for your suggestion.  I put the code segment in the Custom CSS.  But it doesn't seem to make a difference?  Attached is a screenshot of the Editing options when I tried to change to the Section Height of my 'CV' page.  As you can see, the minimum value is still '10'.  How can I change it to be even lower value?

On 9/28/2021 at 5:05 AM, mjz said:

Thanks for your suggestion.  I put the code segment in the Custom CSS.  But it doesn't seem to make a difference?  Attached is a screenshot of the Editing options when I tried to change to the Section Height of my 'CV' page.  As you can see, the minimum value is still '10'.  How can I change it to be even lower value?

 

The code won't add option to Editor Tool..

If you need to remove height for specific section, you can send link, we will give the code to do that.

10 hours ago, tuanphan said:

The code won't add option to Editor Tool..

If you need to remove height for specific section, you can send link, we will give the code to do that.

So then I have two questions based on your last remark.

1. How will I be able to change the section height minimum from the default value of '10' to a lower value?  I want to be able to do that for the entire website.

2. More immediate need is to reduce the gaps between listing items in my 'CV', as well as the 'Texts' pages.  The link to my website is:
https://chimes-orb-6c7c.squarespace.com/config/

Thanks!

Hi,

i'm interested in the code too.

I would like to give only to a single section on a page the minimum height i chose.

The minimum heigh i want is less than height i can chose with the editor.

How can do the trick ?

For reference my site is : 

clownfish-orca-n5ml.squarespace.com

and the page with the section is the "About" page. 

I would like to have the red section, under section with the image banner, "thinner".

Thanks!

Cheers 

On 9/29/2021 at 1:56 AM, tuanphan said:

The code won't add option to Editor Tool..

If you need to remove height for specific section, you can send link, we will give the code to do that.

Hi Tuan,

Thanks.  The specific section(s) that I would like to remove the height limitation is the 'CV' page and the 'Texts' page.  Basically, I would like to reduce the gap between two sections on those pages.  Here's the link to my website again:

https://chimes-orb-6c7c.squarespace.com/config/

Thanks so much!

michael

Hi mjz,

i've found a workaround for this.

You have to find the section id (F12 from browser) and use the code below inside the custom code of the page :

<style>
.page-section[data-section-id="YOURSECTIONID"] {
    min-height: 4vh !important;
}
</style>

Hope this help ! :)

Cheers

15 hours ago, Studio-XS said:

<style>
.page-section[data-section-id="YOURSECTIONID"] {
    min-height: 4vh !important;
}
</style>

I'm not familiar with the concept of 'section id'.  I'm using a wireless keyboard with a mac-book-pro and its F12 is the same key as for Volume control so when i hit it it didn't do anything but lowing the volume.  Is there another way of finding out the section id?  

@mjz

Check out Heather Tovey's most excellent looking Squarespace ID Finder. It's a more user friendly way to get the section id, once you get it installed.

There is another option. You can target the page by section position using nth-child pseudo selector. Whether that targeting will work for your needs, I don't know.

Targeting by section id is good because it should follow the section around the page. The nth-child pseudo selector depends on the position of things and if the position of your element of interest changes, the effect can be ruined.

On 10/2/2021 at 7:54 PM, mjz said:

I'm not familiar with the concept of 'section id'.  I'm using a wireless keyboard with a mac-book-pro and its F12 is the same key as for Volume control so when i hit it it didn't do anything but lowing the volume.  Is there another way of finding out the section id?  

On 10/2/2021 at 8:23 PM, creedon said:

@mjz

Check out Heather Tovey's most excellent looking Squarespace ID Finder. It's a more user friendly way to get the section id, once you get it installed.

There is another option. You can target the page by section position using nth-child pseudo selector. Whether that targeting will work for your needs, I don't know.

Targeting by section id is good because it should follow the section around the page. The nth-child pseudo selector depends on the position of things and if the position of your element of interest changes, the effect can be ruined.

Thank you both for the tips on how to find the section ID and the code snippet.  I cut and pasted it to my "Texts" page CSS.  But it doesn't see to work - the first section still has 10 as the default minimum Height.  Could you take a look?

On 10/5/2021 at 5:25 AM, mjz said:

 

Thank you both for the tips on how to find the section ID and the code snippet.  I cut and pasted it to my "Texts" page CSS.  But it doesn't see to work - the first section still has 10 as the default minimum Height.  Could you take a look?

Which code did you add?

17 hours ago, tuanphan said:

Which code did you add?

Hi Tuan,

This is the code that I added to the "Texts" page:

<style>
.page_section[data-section-id="6150b1d5c2965710d91ed379"{
    min-height: 4vh !important;
}
</style>

But it doesn't seem to work!  I feel like this is an issue that many people have had but the solution seems to elude me so far.  So I'd appreciate you helping me get to the bottom of it.  Thanks

4 hours ago, mjz said:

<style>
.page_section[data-section-id="6150b1d5c2965710d91ed379"{
    min-height: 4vh !important;
}
</style>

There is a syntax error in your code, missing closing square bracket. I don't know if this will fix the problem but it will fix the syntax error.

<style>

  .page_section[data-section-id="6150b1d5c2965710d91ed379"] {
  
    min-height : 4vh !important;
    
    }
    
  </style>

3 hours ago, creedon said:

There is a syntax error in your code, missing closing square bracket. I don't know if this will fix the problem but it will fix the syntax error.

<style>

  .page_section[data-section-id="6150b1d5c2965710d91ed379"] {
  
    min-height : 4vh !important;
    
    }
    
  </style>

 

thanks for pointing it out.  I was under the impression that Squarespace will point out the syntax error in the custom CSS code...nonetheless, I corrected it as you suggested.  But it still doesn't allow me to adjust the section height to lower than 10!  Any other ideas?

15 hours ago, mjz said:

I was under the impression that Squarespace will point out the syntax error in the custom CSS code

Design > Custom CSS will indeed show syntax errors. That is pure CSS so it's relatively easy for SS to build in a syntax checker there.

Code Injections such as Page Settings > Advanced > Page Header Code Injection for a page or Settings > Advanced > Code Injections would be more complex for SS to parse. In those places you can insert multiple kinds of code. CSS, Javascript, HTML, etc. Checking syntax in those places is more difficult. It would be grand if SS did check there but they decided not too.

1 hour ago, mjz said:

But it still doesn't allow me to adjust the section height to lower than 10!  Any other ideas?

I don't have a solution for this issue at present.

Is there a reference where all these keywords such as '.page-section' are listed and their usage explained?  I start to suspect that .page-section isn't what I should be using for this problem...