Liquid, JavaScript, themes, sales channels
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.
This is what it looks like now.
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
Solved! Go to the solution
This is an accepted solution.
Hi !
You need to use css. A sample code :
#shopify-section-collection {
margin-top: -100px;
}
This is an accepted solution.
Hi !
You need to use css. A sample code :
#shopify-section-collection {
margin-top: -100px;
}
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024