Reduce padding between sections - CSS not working

Site URL: https://mango-burgundy-bmh9.squarespace.com/config/

Hello! 

I am trying to reduce the padding between each section of my "projects" The gap is huge and my CSS code i am using is not working.... 

help! please! 

Your site is private. Can you setup password & share url again? We can check easier

so sorry 

https://mango-burgundy-bmh9.squarespace.com/

Pass is: Projects2022

On 6/27/2022 at 6:13 AM, ellyferguson0 said:

so sorry 

https://mango-burgundy-bmh9.squarespace.com/

Pass is: Projects2022

You mean these gaps?

Hi, 

I hope I am in the right thread

I have a project page and the padding is huge

Is there any code to reduce it?  

Many thanks

Natalia

On 1/22/2024 at 7:35 PM, nataliaamelia said:

Hi, 

I hope I am in the right thread

I have a project page and the padding is huge

Is there any code to reduce it?  

Many thanks

Natalia

Can you share link to this page? We can check easier

2 hours ago, tuanphan said:

Can you share link to this page? We can check easier

Here you go
https://www.nataliaameliasaied.com/backstage

or do you need password? 

On 1/25/2024 at 4:57 PM, nataliaamelia said:

Here you go
https://www.nataliaameliasaied.com/backstage

or do you need password? 

Try adding this code to Website > Website Tools (under Not Linked) > Custom CSS

.fe-65a9952cee46d26cc21708b5 {
    --row-height-scaling-factor: 0 !important;
}

Hi Tuan, thanks for the code, although I think it didn't work. 

Any other tip/code that you think might change the "project" section 

thanks!

23 hours ago, tuanphan said:

Try adding this code to Website > Website Tools (under Not Linked) > Custom CSS

.fe-65a9952cee46d26cc21708b5 {
    --row-height-scaling-factor: 0 !important;
}

 

On 1/29/2024 at 4:50 PM, nataliaamelia said:

Hi Tuan, thanks for the code, although I think it didn't work. 

Any other tip/code that you think might change the "project" section 

thanks!

 

Try this new code

.fe-65a9952cee46d26cc21708b5 {
    --row-height-scaling-factor: 0 !important;
}
[data-section-id="659d8d3d3175681673a63aa5"] {
    min-height: 30vh !important;
    height: 50vh;
}
.portfolio-hover-display {
    min-height: unset !important;
    height: 100% !important;
}
[data-section-id="659d8d3d3175681673a63aa5"] .content-wrapper {
    height: 100% !important;
}

Hi again,

As far as I can see, It didn't work:(

I am considering changing the design and removing the project block. 

Or do you have another option for me? 

many thanks 

Natalia

On 2/1/2024 at 4:25 AM, tuanphan said:

Try this new code

.fe-65a9952cee46d26cc21708b5 {
    --row-height-scaling-factor: 0 !important;
}
[data-section-id="659d8d3d3175681673a63aa5"] {
    min-height: 30vh !important;
    height: 50vh;
}
.portfolio-hover-display {
    min-height: unset !important;
    height: 100% !important;
}
[data-section-id="659d8d3d3175681673a63aa5"] .content-wrapper {
    height: 100% !important;
}

 

@nataliaamelia you can't remove really, because that space is reserved for the hover image.

But you can try doing a negative margin on the previous section, although it may cause some overlaps.

Feel free to play with -20vh

section[data-section-id='65a9952c3f35d7472ba5143e'] {
   margin-bottom: -20vh;
}

@nick_sh thanks ! it improves it !

cheers
 

On 2/4/2024 at 3:23 AM, nataliaamelia said:

Hi again,

As far as I can see, It didn't work:(

I am considering changing the design and removing the project block. 

Or do you have another option for me? 

many thanks 

Natalia

 

 

Can you add & keep the code? I can check again easier

Hi, 

I have added this two

the one you sent 

.fe-65a9952cee46d26cc21708b5 {
    --row-height-scaling-factor: 0 !important;
}
[data-section-id="659d8d3d3175681673a63aa5"] {
    min-height: 30vh !important;
    height: 50vh;
}
.portfolio-hover-display {
    min-height: unset !important;
    height: 100% !important;
}
[data-section-id="659d8d3d3175681673a63aa5"] .content-wrapper {
    height: 100% !important;
}

and the one nick_sh sent too

section[data-section-id='65a9952c3f35d7472ba5143e'] {
   margin-bottom: -20vh;
}

https://www.nataliaameliasaied.com/backstage

I hope I understood you correctly

Thanks, 

I think you wrap my code in another } symbol, so the code renders different, here the code show on my browser

Move my code to top of CSS box, and don't wrap any symbols around the code

tnx @tuanphan !!

Now that the names are well aligned under the text box above, I have a last question - is there any way to give a bit more space under the projects?
https://www.nataliaameliasaied.com/backstage

On 2/11/2024 at 8:29 PM, nataliaamelia said:

tnx @tuanphan !!

Now that the names are well aligned under the text box above, I have a last question - is there any way to give a bit more space under the projects?
https://www.nataliaameliasaied.com/backstage

Increase this space?

Yes, exactly!

1 hour ago, tuanphan said:

Increase this space?

Use this CSS under

[data-section-id="659d8d3d3175681673a63aa5"] .content {
    padding-bottom: 200px !important;
}
[data-section-id="659d8d3d3175681673a63aa5"] {
    height: 60vh !important;
}

@tuanphan yuo have super powers!