Jump to content

How to tighten margin between blocks in a hero banner?

Recommended Posts

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.

Screen Shot 2021-11-06 at 10.21.47 PM.png

Is it the result you want to achieve?

image.png.635ef106433f9f0cc70bfa975e232bcc.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

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

 

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.