Empty Space reduction between Slideshow and Image with text

Store Design
1

Hey guys, I was wondering if anybody could help me with minimizing the space between my slideshow and the section below. The slideshow is at the top of my page.

password: gawtea

2

Hi,

There are 2 index-section classes make the margin of 115px. However the index-section class is used for other sections. Please add (copy & paste) the code below in to the theme.scss.css (Online Store > Actions > Edit code > Assets > theme.scss.css).

@media only screen and (min-width: 769px) {
  .shopify-section .index-section--hero {
    margin-bottom: -115px !important;
  }
}
@media only screen and (max-width: 768px) {
  .shopify-section .index-section--hero {
    margin-bottom: -40px !important;
  }
}

Hope it helps.

Thanks.

3

Hi @benjamids ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

/*== For desktop ==*/
div#shopify-section-1640299774ca0c57e4+.index-section {
    margin-top: 40px !important;
}
/*== For mobile ==*/
@media only screen and (max-width: 768px) {
	div#shopify-section-1640299774ca0c57e4+.index-section {
		margin-top: 30px !important;
	}
}

You can change the number to your liking it will work fine.

4

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

div#shopify-section-164998075295529db1 {
margin: 0 0 75px 0;

}
Thank you.

5

I just tried this and nothing changed unfortunately.

6

Thank you this worked. Do you know how to make the space even smaller I messed around with the 75 number and brought it to 30 and still no change

7

Hi @benjamids ,

Have you tried my code? It will work fine even if you change the position of the sections below the slideshow.

With the current code you add, it will work for the current section, if you change the position of the sections below the slideshow, it won’t work.

Hope it helps!