Add space between image banners on website (Dawn Theme)

[Justin34]

Hi all,

I have 9 image banners on my website. Its pretty much all my website is on the homepage. And I love it. Though I am curious to see what my website would look like with a little white space in between each banner. I may hate it. I may love it. But I want to try it to see what it looks like. Anyone know how I would go about doing that? Thanks so much!

I am using dawn theme

My website is www.PennsylvaniaParks.org

Thank you in advance!

[GemPages]

Hi @Justin34 

You can add a code to make a white space in between each banner:

1. Go to Online Store -> Theme -> Edit code https://prnt.sc/fJOF9RnL7Rp5
2. Open your theme.liquid theme file

3. Paste the below code before </head> 

{% if template == 'index' %}
<style>
  .shopify-section .banner {
    margin-bottom: 20px !important;
  }
</style>
{% endif %}

The result may look like this:

Best regards,
GemPages Support Team

[Mirnamoretti]

How can i change the color of this "space"?

[Denishamakwana]

Please add below css code in bottom of assets/base.css file

.shopify-section.section {

       margin-bottom: 15px;

}

Thank you.

[DanG25]

Can this be applied to single banners - I am wanting spacing between some of the banners on my home page but not all of them. Thanks!