How to tighten margin between blocks in a hero banner?

Site URL: http://vibemade.com/mobile

For our mobile-specific page we have a hero section with an image background, text in an image over it, and a button.

The space between the text image and the button is too large. I haven't been able to target them as sections since they're within an existing section.

How can I reduce the space between the text and button?

See image attached.

35 minutes ago, vibemade said:

Site URL: http://vibemade.com/mobile

For our mobile-specific page we have a hero section with an image background, text in an image over it, and a button.

The space between the text image and the button is too large. I haven't been able to target them as sections since they're within an existing section.

How can I reduce the space between the text and button?

See image attached.

Is it the result you want to achieve?

17 hours ago, bangank36 said:

Is it the result you want to achieve?

Yes! How'd you do it @bangank36 ?

2 hours ago, vibemade said:

Yes! How'd you do it @bangank36 ?

Hi,

You can try adding to Home > Design > Custom Css

section[data-section-id="609b461aebc9b414a36f72c2"]  .button-block {
  padding-top: 0;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

44 minutes ago, bangank36 said:

section[data-section-id="609b461aebc9b414a36f72c2"]  .button-block {
  padding-top: 0;
}

Gonna try it now. If my basic understanding serves, you're targetting the hero section and then saying "any block of type [button] should have this padding" right?

7 hours ago, bangank36 said:

section[data-section-id="609b461aebc9b414a36f72c2"]  .button-block {
  padding-top: 0;
}

Hi @bangank36 this worked! It still wasn't as close as I wanted so I added the following (inside the same section) and it tightened it up even more — posting in case it helps others 🙂 

  .sqs-row .sqs-block:not(.float):not(.sqs-feature-gated-wrapper):first-child {
    padding-bottom: 6px;
  }