Block spacing between text / padding issues

Hi all,

I'm having a bit of trouble with some spacing. 
I've coded a bit of padding between my heading and subheading, however it has pushed down the text so the overall padding is a bit uneven.

The code I have used is...
 

body#collection-6464a7b405df9b56279099c1{
  h1 {margin: 10px !important;}}

Which has added 10px spacing between the text below 'Artistry' and 'Chrome Hearts', but as you can see, the gap at the bottom is now too small and uneven from the top spacing.

I'd like to keep the 10px padding between the heading and subheading, but have even padding top and bottom.
Can someone help?

Thanks in advance!
PW: Dodger50!

What is site url?

@tuanphan - https://rectangle-cardioid-z6nt.squarespace.com 

Dodger50!

https://rectangle-cardioid-z6nt.squarespace.com/?noredirect

You mean a page in Work page? I tried Homepage but don't see it 

Hi @tuanphan,

Yes for example, on a page like this > https://www.claretestar.com/stellamccartney PW Dodger50!

It's on the mobile view.

Thanks

Hey @tuanphan, are you able to help me with a solution?

Thanks so much

Don't remove any code in your current code.

Add this to Custom CSS box

@media screen and (max-width:767px) {
body#collection-6464adc0a227b9444712b561 h1 {
    margin-top: 0 !important;
}
}

Hey @tuanphan

Sadly the code above hasn't worked - is there anything else we can try?

TIA

@Ziggy
Me again but on another issue I'm having - could you help me here too?! I am very stuck!

8 minutes ago, RebelRuth said:

Me again but on another issue I'm having - could you help me here too?! I am very stuck!

Before trying any code I think I would suggest testing changing the fluid engine grid spacing to zero as I think that is the cause of the uneven spacing on mobile.

@Ziggy
Will take a look now, thanks for that suggestion!

Hey @Ziggy
I looked at the spacing, however didn't help

Let me know if the above isn't clear and I can re-explain / start again!

Best,

Ruth

35 minutes ago, RebelRuth said:

I looked at the spacing, however didn't help

Really? You can't adjust it?

Can you tell me how you set this page up?

Hey Ziggy,

Sure.

So this website is for a client who is an artist, and the pages I'm having issues with are her title pages, as part of a portfolio. There are 4 sets of pages like these. (Stella McCartney, Selfridges, Chrome Hearts and Artist Collab).

For example, if I click on the 'Selfridges' page, you can see especially on mobile view that the padding at the top is a little bit more than the bottom on the example below. I'd like the text to sit in the middle with even padding.

The code that I have used is;

To create a bit of space betweeen the title (Superself) and subtitle (Selfridges 2022), adjust font size of subtitle, the hover over code to reveal the text, and some other spacing coding below:

/* section spacing on sub heading Selfridges*/
#collection-64437dcdecdf542720739ff5 {
  h1, h3 {
    margin: 0px !important;
  }
  h1{
    margin-bottom: 20px !important;
  }
}

* Selfridges - Space between h3 subtitles */
body#collection-64437dcdecdf542720739ff5{
  h1 {margin: 10px !important;}}

  
@media only screen and (max-width:767px) {
  /* smaller h3 on selfrdiges Mobile projects page*/
#collection-64437dcdecdf542720739ff5{
  h3 {
    font-size:13.5px !important;
  }}
}

/* section hover Selfridges*/
@media screen and (min-width:992px) {
#collection-64437dcdecdf542720739ff5{
section:after {
    content: "";
    background-color: rgba(0,0,0,0.0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s ease;
}
section:hover:after {
    opacity: 1;
    transition: all 0.3s ease;
}
section .html-block {
    opacity: 0;
    transition: all 0.3s ease;
}
section:hover .html-block {
    opacity: 1;
    transition: all 0.3s ease;
  }}
}

Happy to send you the whole code for the site, if that makes more sense!

Thank you

Can you add a margin-bottom to the h3?

This is what I'm looking at with the grid and suggestion about changing the column/row gap

The text block seems to be spaced down by the row/column gap which is at the top but not the bottom. Do you ever use the inspect tool in chrome?