Hi community - I need help with reducing the redundant space on the left of my featured collection of my homepage. Please see image below. I want to move the Title and the Featured Collection to the left. Please see my attached screenshot.
Topic summary
A Shopify store owner is experiencing excessive white space on the left side of their homepage’s featured collection section. They want to shift both the title and product collection further left to reduce this gap.
Proposed Solution:
A CSS code snippet was provided to adjust the desktop margin:
- Navigate to Online Store → Theme → Edit code
- Add custom CSS to theme.css or base.css file
- The code modifies the
--desktop-margin-left-first-itemvariable for viewports wider than 990px
A before/after screenshot demonstrates the reduced left margin after applying the fix. The solution targets desktop displays specifically using a media query and recalculates spacing based on viewport width and page width variables.
Status: The thread remains open with the store owner sharing their URL with multiple responders but not yet confirming whether the CSS solution resolved the issue.
Hey @kettlegourmet ,
Could you please share your store URL and password [if applicable] so that I can take a look and provide you solution code.
Looking forward to hearing back from you.
Thanks
Hello @kettlegourmet ,
Can you please share your store URL?
Hi @kettlegourmet ,
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(min:width:990px){
--desktop-margin-left-first-item: max(0rem, calc((85vw - var(--page-width) + 0rem - var(--grid-desktop-horizontal-spacing)) / 5)) !important;
}
Result:
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 
(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
1 Like