Solved

Decrease top and bottom margin/padding between sections on homepage. Debut Theme.

boomingbeats
Tourist
6 0 0

Hi everyone! I'm trying to reduce the margins between two sections on my front page; namely my "Featured collection" and "Image with text overlay". The two sections are too far apart because of excessive padding. I've looked around on the forums for quite a while but can't seem to get any code to work.

problem description.png

 This is what it looks like now.

desired result.png

And this is the result I'm trying to achieve.

Anyone else had this problem? Any advice or guidance is much appreciated.

 

website: boomingbeats.com

password: epsilon

 

Best regards,

Jim

Accepted Solution (1)

Rajameltine
Explorer
59 4 3

This is an accepted solution.

Hi !

You need to use css. A sample code :

#shopify-section-collection {
    margin-top: -100px;
}
Need fastly help, contact me : https://freelancerajameltine.000webhostapp.com/
Besoin d'aide rapidement, faites appel à moi : https://freelancerajameltine.000webhostapp.com/
Email: rajameltine@gmail.com

View solution in original post

Replies 2 (2)

Rajameltine
Explorer
59 4 3

This is an accepted solution.

Hi !

You need to use css. A sample code :

#shopify-section-collection {
    margin-top: -100px;
}
Need fastly help, contact me : https://freelancerajameltine.000webhostapp.com/
Besoin d'aide rapidement, faites appel à moi : https://freelancerajameltine.000webhostapp.com/
Email: rajameltine@gmail.com
boomingbeats
Tourist
6 0 0

Thank you! This was the correct solution. I had to modify the code slightly in order to make sure that the heading didn't disappear on mobile. Pasting it below in case someone finds this thread and wants to try it for themselves.

/*Reduced margin featured collection Desktop Only*/
@media only screen and(min-width:500px){
  #shopify-section-collection {
    margin-top: -110px;
}
}
/*Reduced margin featured collection Mobile screen only*/
@media only screen and(max-width:749px){
  #shopify-section-collection {
    margin-top: -70px;
}
}

 

Thanks again.