Jump to content

how to circumvent the default minimum height for a section?

Recommended Posts

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

Link to comment
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?

Link to comment
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

 

Link to comment

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!

 

Link to comment
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?

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 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;
}

 

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

 

Screen Shot 2021-09-27 at 4.01.16 PM.png

Link to comment
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?

 

Screen Shot 2021-09-27 at 4.01.16 PM.png

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.

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

Link to comment

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 

Link to comment
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

Link to comment
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?  

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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?

Link to comment
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?

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

 

Link to comment
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>

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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?

Link to comment
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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.