Eliminate padding and margins in Spark Theme

Store Design
1

Hello,

I just purchased the Spark theme (set to Chic) and I want to eliminate the padding between all of my sections on the home page. I tried a few solutions but can’t seem to find success.

https://garagecollective.myshopify.com/

Thank you,

DB

1 Like
2

Hi @Dbarry ,

You can follow the instructions below

  1. Go to Admin > Online store > Themes > Actions > Edit code
  2. Go to Asset folder, and open the theme.css file
  3. Add the code below.

NOTE: You can adjust the px

.template-index section:not(:last-child) {
    margin-bottom: -50px;
}
3

@Dbarry

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
@media (min-width: 45em) {
.section.section--small {
    margin-bottom: 0 !important;
}
.section {
    margin: 100px 0px;
}
.section.section--contrast {
    padding: 50px 0px;
}
}
4

Hi @Dbarry ,

You want to remove all, it will show like this?

Screenshot.png
Screenshot.png1894×454 237 KB

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

.template-index section:not(:last-child) {
    margin-bottom: 0 !important;
}
.template-index .section {
    margin: 0 !important;
}

Hope it helps!

5

This looks like the best bet but.. When I removed it, saved without code then went back and added it again, I can’t get the code to work.

Also is there a way for this just to apply to desktop and not mobile?

Thanks,

DB

6

Hi @Dbarry ,

Go to Assets > theme.css and remove code here:

Screenshot.png
Screenshot.png546×540 9.91 KB

Then add the following code:

@media (min-width: 45em){
	.template-index section:not(:last-child) {
		margin-bottom: 0 !important;
	}
	.template-index .section {
		margin: 0 !important;
	}
}

Hope it helps!

7

This worked thank you!

1 Like