Shopify themes, liquid, logos, and UX
Hello,
I'm trying to increase the space between the header and the featured collection on my Homepage. I'm not sure exactly where to find the code to do it. Anyone able to assist? My site is password protected, but I can send a collaborator code.
Thanks
Solved! Go to the solution
This is an accepted solution.
Yes, replace to this code.
@media only screen and (min-width: 749px) {
.featured-collection {
padding-top: 5rem;
}
}
And Save.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @corp41
Please, share your store URL or preview. I dont need a collaboration access. THanks!
Just sent you a message with that info! Thanks!
Thanks for the info, try this one.
.featured-collection {
padding-top: 80px;
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
That worked perfectly. Is there a way to make it where the change only affects desktop and not mobile? It pushes the mobile view a little too far down.
This is an accepted solution.
Yes, replace to this code.
@media only screen and (min-width: 749px) {
.featured-collection {
padding-top: 5rem;
}
}
And Save.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Worked perfectly, thank you for your help!
Hi Corp41
- You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css, style.css or theme.css and add this code at the end of the file
@media (min-width: 768px) {
.featured-collection {
padding-top: 80px !important;
}
}
Best,
Esther
Thanks for that, it didn't seem to work.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025