url: https://1v27tuhni88jbj8n-17240367.shopifypreview.com
How do I add a small margin above the collection grid so that its not joined together with the header image
Topic summary
Goal: add a small white space above the collection grid so it doesn’t touch the header image in the Shopify “Influence” theme.
- Solution proposed: edit the theme’s code (theme.liquid) and insert a CSS rule in the to add spacing (e.g., 25px) above the collection grid. The amount of space is adjustable.
- Issue encountered: the added spacing affected mobile as well, where sufficient space already existed, making the mobile gap too large.
- Adjustment: update the CSS to apply only on desktop using a media query (CSS rule that targets specific screen sizes). This limits the added spacing to larger screens.
- Outcome: after applying the desktop-only CSS, the spacing looked correct; the original poster confirmed the fix worked.
Status: resolved. No further action requested.
Notes: A screenshot was provided for reference; exact code snippets weren’t fully visible in the thread, but the fix involves adding CSS in theme.liquid and using a desktop media query.
Hey @emekayode ,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Change the padding value to however much space you’d like, I left it at 25px.
Screenshot is for reference only, the correct code to paste is the one shown above.
1 Like
Is there a way to just add it for a desktop view? As there is already a space when its on the mobile version just not the desktop, so when I add the code it makes the margin space twice as big for the mobile version
Oh yeah sure,
Just change the whole code to this
1 Like
much appreciated, that did the trick
No problem, good luck with your store!