Decreasing Section Padding Squarespace 7.1

Dear all, 

I would like to reduce all the the space between sections in my website. 

Is there any option ? 

Many thanks

18 hours ago, ElizabethM said:

Dear all, 

I would like to reduce all the the space between sections in my website. 

Is there any option ? 

 

Many thanks

If SS 7.1, use this CSS

article .content-wrapper {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

I'm trying to change the amount of padding between my top menu and my work links but it seems impossible.

My site is www.machworld.net and here is a screenshot with the css code I was trying to use.

6 hours ago, alimach said:

I'm trying to change the amount of padding between my top menu and my work links but it seems impossible.

My site is www.machworld.net and here is a screenshot with the css code I was trying to use.

 

Add to Design > Custom CSS

.portfolio-hover-items {
    justify-content: flex-start !important;
}

1 hour ago, tuanphan said:

Add to Design > Custom CSS

.portfolio-hover-items {
    justify-content: flex-start !important;
}

 

Thanks for this. Unfortunately when I add this code, the hover states don't follow along, they're in the same position as they were before. Is there any other way to adjust the vertical spacing?

On 10/11/2021 at 9:24 AM, alimach said:

Thanks for this. Unfortunately when I add this code, the hover states don't follow along, they're in the same position as they were before. Is there any other way to adjust the vertical spacing?

Try this new code

[data-section-id="60cfa8c99cd4cf6a758ac40e"] {
    min-height: unset !important;
    height: 50vh !important;
}

.portfolio-hover-backgrounds {
    align-items: flex-end;
}

How would I get rid of this spacing? 

www.thedailyassist.com

@makeithumme

It appears you solved the issue?

How do  i  get rid of spacing in sections? I've tried so many things and nothing seems to work.  

This is an experimental page on a site I'm working on 

www.sucoca.com/pagea 

PW: chocolate

@failbetter

It appears you have some poorly formed HTML in your page which has caused the parser to produce all kinds of funkiness.

I suspect you have some extra closing </div> in your marquee code block.

Before we can help with any spacing issues you'll need to get that issue taken care of.

@creedon 

Hi, Thanks for taking a look - Yes it was me messing around with grid and it not working very well..forget that page.  The same thing is happening to a marquee on another page (bottom of page) 

I literally want it the size of the text so its just like a bar across the page.

www.sucoca.com/about  

PW: chocolate

4 hours ago, failbetter said:

The same thing is happening to a marquee on another page (bottom of page) 

This page appears to be having the same issue.

On 11/13/2021 at 4:41 PM, creedon said:

This page appears to be having the same issue.

Yeah... I have no idea why that is i have even deleted the page and redone it the same thing is happening.  I suspect is the custom code for the marquee that i put in a code block. I just don't know how to do a marquee properly - some people have suggested using a scroll instead? My marquee is also starting at the page margin... 🤨

Or it could be a plugin I have for split sections.....???

2 hours ago, failbetter said:

I suspect is the custom code for the marquee that i put in a code block.

The first thing you could do is remove the code block, make a copy of the code somewhere. Then see if that takes care of the funky formatting. It may not be apparent from looking at the rendered page. If you know how to use the Inspector you can examine the code of the page and see if it looks wrong. If not, let us know and we can take a look at the page again to see if the issue has cleared. At this point we should be able to determine if it was the marquee code and move on from there.

On 11/6/2021 at 1:26 PM, tuanphan said:

Do you still need help?

Yes please!

4 hours ago, creedon said:

The first thing you could do is remove the code block, make a copy of the code somewhere. Then see if that takes care of the funky formatting. It may not be apparent from looking at the rendered page. If you know how to use the Inspector you can examine the code of the page and see if it looks wrong. If not, let us know and we can take a look at the page again to see if the issue has cleared. At this point we should be able to determine if it was the marquee code and move on from there.

Right - I've done that and I've looked at the inspector. Looks better...

19 minutes ago, failbetter said:

Right - I've done that and I've looked at the inspector. Looks better...

Yes it does. You can post your marquee code and we can take a look at it to see if we can see the problem.

@creedon. Thanks for looking again.  

So in the code block it's this : 

<div class="scroll">VISIT SUCOCA ✱ VISIT SUCOCA ✱ VISIT SUCOCA ✱ VISIT SUCOCA ✱ VISIT SUCOCA ✱ VISIT SUCOCA ✱ VISIT SUCOCA ✱ VISIT SUCOCA ✱ VISIT SUCOCA ✱ </div>

and in the css its this:  

.scroll{
  color:#E3DFD7;
  font-family:'Didot';
  background-color:black;
overflow: hidden!important;
 position: relative!important;
  display:flex;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 -moz-animation: scroll 20s linear infinite;
 -webkit-animation: scroll 20s linear infinite;
  animation: scroll 20s linear infinite;}
@-moz-keyframes scroll {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}

@-webkit-keyframes scroll  {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}

#page {overflow-x:hidden}

@failbetter

I'm stumped. I see nothing odd about that code. The div is about as simple as you can get. Certainly nothing that would cause the failure in rendering we were seeing.

The only thing I can suggest would be to put the code back in and see if the issue returns.

Oh and the CSS you put in Design > Custom CSS?

Yes - put the custom css in Design > Custom css. 

Thanks for having a look I'm glad its not just me!  I will try that and see what happens.  

@creedon Hello, sorry if this has been sorted out somewhere else but I'm struggling with this.

I have various section types on a page (Image, gallery 2 col, gallery 3 col etc.)

Within the gallery  you can set the distance between the images (11 px)

I would like the distance between each section to be similar.

page I'm working on is https://kale-sturgeon-gymm.squarespace.com/work/georgiaraes

site is open.

Thanks

On 1/18/2022 at 4:36 AM, Spotvin said:

@creedon Hello, sorry if this has been sorted out somewhere else but I'm struggling with this.

I have various section types on a page (Image, gallery 2 col, gallery 3 col etc.)

Within the gallery  you can set the distance between the images (11 px)

I would like the distance between each section to be similar.

page I'm working on is https://kale-sturgeon-gymm.squarespace.com/work/georgiaraes

site is open.

Thanks

 

Try adding to Design > Custom CSS

body#item-61e1ccff048c5667e33a3d17 {
article .content-wrapper {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}
.gallery-grid.gallery-grid--layout-grid {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
}

@tuanphan Thanks! I was able to get it to work on one page. How do I get it to work on other "work" pages. I'm not sure where you found that ID from.

This is the page it's working on

https://www.spotvin.com/work/bunch

Not working 

https://www.spotvin.com/work/georgiaraes

8 hours ago, Spotvin said:

@tuanphan Thanks! I was able to get it to work on one page. How do I get it to work on other "work" pages. I'm not sure where you found that ID from.

This is the page it's working on

https://www.spotvin.com/work/bunch

Not working 

https://www.spotvin.com/work/georgiaraes

Edit another page >> Add a Code Block (anywhere) >> Paste this code > Then save & reload the site

<style>
  article .content-wrapper {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}
.gallery-grid.gallery-grid--layout-grid {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
</style>

13 hours ago, tuanphan said:

Edit another page >> Add a Code Block (anywhere) >> Paste this code > Then save & reload the site

<style>
  article .content-wrapper {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}
.gallery-grid.gallery-grid--layout-grid {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
</style>

 

Thank you! @tuanphan