I am using the spotlight theme and there is this white bar between the header and template which I would like to get rid of. Here is a preview of what I mean:
Thanks for the help!
Topic summary
A user encountered an unwanted white space between the header and template sections while using Shopify’s Spotlight theme. After sharing their store URL and removing password protection, a solution was provided involving custom CSS code.
Solution implemented:
- Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
- Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
- Add CSS targeting the slider component to remove top margin and adjust padding
Outcome:
The CSS fix successfully eliminated the white bar. Multiple users confirmed this solution worked for their similar issues, specifically noting success with base.css.
1 Like
Hi @unkown123
Would you mind to share your store URL? Thanks!
1 Like
hialos.se
Its password protected.
Sorry, I removed the password now
Thanks for the info, check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
ul#Slider-template--22468661346648__featured_collection {
margin-top: 0px;
}
slider-component.slider-mobile-gutter.page-width.page-width-desktop.scroll-trigger.animate--slide-in {
padding-top: 20px;
}
And Save.
result:
1 Like
That worked, thanks!
Welcome. Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Only working solution for my problem! This IS the go to solution → I used base.css